Angular 2 Routen funktionieren nicht während der Navigation durch den Browser URL

Question

Ich habe einige Probleme mit Routen für ein Angular-Projekt, hauptsächlich mit der dritten Ebene von Child-Routen. Die Routen funktionieren perfekt während der Navigation in der App.() und das Problem entstehen beim Zugriff auf die URL über die Browser-URL.

Meine Angular-Version ist 2.4.0
Ich teste auf Dev-Server mit ng serve.

Für ein Projekt mit der angegebenen Struktur,

. 
├── photos 
├── posts 
├── users 
│ ├── detail 
│ │ ├── address 
│ │ ├── family 
│ │ ├── information 
│ │ └── phones 
│ ├── friends 
│ └── profile 
└── videos 

Im Folgenden ist der Code,

// user routes 
export const userRoutes : Routes = [ 
    { 
    path: 'detail', 
    component: DetailComponent 
    }, 
    { 
    path: 'friends', 
    component: FriendsComponent 
    }, 
    { 
    path: 'profile', 
    component: ProfileComponent 
    } 
] 

//app routes 
const appRoutes: Routes = [ 
    { 
    path: '', 
    component: HomeComponent 
    }, 
    { 
    path: 'photos', 
    component: PhotosComponent 
    }, 
    { 
    path: 'posts', 
    component: PostsComponent 
    }, 
    { 
    path: 'users', 
    component: UserListComponent 
    }, 
    { 
    path: 'user/:username', 
    component: UserComponent, 
    children: userRoutes 
    }, 
    { 
    path: 'videos', 
    component: VideosComponent 
    } 
] 
export const AppRoutes = RouterModule.forRoot(appRoutes); 
export const appRoutingProviders: any[] = []; 

und ist registriert als,

@NgModule({ 
    declarations: [ 
    // declarations 
    ], 
    imports: [ 
    AppRoutes 
    ], 
    providers: [ 
    appRoutingProviders 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

So ist die Anwendung funktioniert gut mit der RouterLink

[routerLink]="['/user', username, 'detail'] 

aber wenn ich den Browser <host>/user/myuser/detail es navigieren erhöhen Ausnahme

Uncaught (in promise): Error: Cannot find primary outlet to load 'DetailComponent' 

Was ist falsch? Vielen Dank.

NB: Ich habe <router-outlet> Setup und arbeitet perfekt auf Router und das Problem entsteht, wenn die navigate durch vollständige URL in Browser.

Answer 1

Ich bin der Annahme, dass, wenn Sie user/:username/-/user/:username/detail navigieren Sie benötigen UserComponent alles zu verbergen, der auf seine Vorlage ist und zeigen die DetailComponent

So zu erreichen, dass Sie eine Komponente benötigen, die geladen wird, seine Kinder Komponente:

parent.component.html

<router-outlet></router-outlet> 

Routen.ts

Nun wollen wir die Routen festgelegt, so dass user/:username/

in der übergeordneten Komponente geladen wird

// user routes 
export const userRoutes : Routes = [ 
{ 
    path: '', 
    component: UserComponent // the '' path will load UserComponent 
    }, 
    { 
    path: 'detail', 
    component: DetailComponent 
    }, 
    { 
    path: 'friends', 
    component: FriendsComponent 
    }, 
    { 
    path: 'profile', 
    component: ProfileComponent 
    } 
] 

//app routes 
const appRoutes: Routes = [ 
    { 
    path: '', 
    component: HomeComponent 
    }, 
    { 
    path: 'photos', 
    component: PhotosComponent 
    }, 
    { 
    path: 'posts', 
    component: PostsComponent 
    }, 
    { 
    path: 'users', 
    component: UserListComponent 
    }, 
    { 
    path: 'user/:username', 
    component: ParentComponent, //This component will load its children 
    children: userRoutes 
    }, 
    { 
    path: 'videos', 
    component: VideosComponent 
    } 
] 
export const AppRoutes = RouterModule.forRoot(appRoutes); 
export const appRoutingProviders: any[] = []; 

So geschieht hier, was ist, wenn Sie zu user/:username navigieren ParentComponentUserComponent dann geladen wird, in übergeordnete Komponente Steckdose geladen (da der '' Pfad entsprechen user/:username)

Hier ist ein Arbeitsbeispiel: Github

Wenn Sie auf user/myuser zugreifen, wird Folgendes angezeigt: Benutzer arbeitet! user/myuser/details wird angezeigt: Details funktioniert! wie Sie unten sehen können (Ohne eine Router mit)

Answer 2

Verwenden Sie diesen Code in HTML-Router = „/ user“ und bitte Ihren Weg in routing.ts erwähnen und wenn u klicken diese Router sie betreffenden Link springen

Answer 3

Haben Sie die <base href="/">?

gesetzt Was ist dein Backend? Wenn ein Benutzer zuerst zu einer vollständigen URL der Unterseite Ihrer Anwendung navigiert (zB www.mysite.com/users/john-doe) und Ihr Backend die angular 2 Bootstrap-Seite nicht zurückgibt (index.html mit den Bootstrap-Skripten) , dann wird der eckige Router nie eingreifen, obwohl ich denke, dass das in Ihrem Fall nicht das Problem ist, da Sie einen Winkelfehler erhalten.

Ich habe meine .net-Core-Backend festgelegt immer Index.html für Anforderungen, die keine statischen Dateien sind zurückzugeben, so dass es immer ordnungsgemäß lädt die App und verwendet das eckige Routing.