Angular 2: Router-Struktur wird in komplexer Modularchitektur nicht korrekt geladen

Question

Ich habe eine komplexe Modularchitektur, um Domänen in meiner Angular2-Anwendung zu trennen. Nun, ich folge Tutorial einer Routing architecure in Tour der Helden weichen jedes Modul den eigenen App-routing.module hat die Routen zu erklären:

• app.module.ts (app-routing.module.ts)
  • features.mdoule.ts (features-routing.module.ts).
    • order.module.ts (order-routing.module.ts).

In meinem app-routing.module.ts:

const appRoutes: Routes = [ 
 
    { path: '', redirectTo: "dashboard", pathMatch: 'full'}, // always first 
 
    { path: '', loadChildren:() => AuthModule }, 
 
    { path: '', loadChildren:() => FeaturesModule, canActivate: [AuthGuard]}, 
 
    { path: '**', component: PageNotFoundComponent } // always last 
 
]; 
 

 
@NgModule({ 
 
    imports: [ 
 
    RouterModule.forRoot(appRoutes) 
 
    ], 
 
    exports: [ 
 
    RouterModule 
 
    ] 
 
}) 
 
export class AppRoutingModule {}

In meinem Funktionen-routing.module.ts:

const featuresRoutes: Routes = [ 
 
    { path: 'features', loadChildren:() => OrderModule }, 
 
// ... other modules 
 
]; 
 

 
@NgModule({ 
 
    imports: [ 
 
    RouterModule.forChild(featuresRoutes) 
 
    ], 
 
    exports: [ 
 
    RouterModule 
 
    ] 
 
}) 
 
export class FeaturesRoutingModule {}

In meiner Bestellung-routing.module.ts:

const orderRoutes: Routes = [ 
 
    { path: 'order', component: OrderListComponent, data: { info: { title: 'Orders' } } } 
 
]; 
 

 
@NgModule({ 
 
    imports: [ 
 
    RouterModule.forChild(orderRoutes) 
 
    ], 
 
    exports: [ 
 
    RouterModule 
 
    ] 
 
}) 
 
export class OrderRoutingModule {}

Im Fall, wenn ich navigieren zu localhost: 3000/features/Bestellung perfekt funktioniert, aber ich kann zu localhost: 3000/order navigieren und funktioniert auch.

Wie funktioniert das Mapping Router in Angular2? Mein Routing stimmt nicht? Ich brauche nur Funktionen/Bestellung URL funktioniert.

Vielen Dank.

Answer 1

Menschen,

ich erfolgreich in einer anderen Art und Weise umgesetzt, ich hatte die Einfuhr von meiner Module in hierarchischer Module für Angular-Route löschen nicht die Routen mit RootRoutes, auf diese Weise meiner Komponenten sind Independents und fauler Loadeds verbinden. Herauszufinden, meine Architektur, wenn jemand etwas ähnliches benötigt:

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
 
     import { NgModule } from '@angular/core'; 
 
     import { FormsModule } from '@angular/forms'; 
 
     import { HttpModule } from '@angular/http'; 
 

 
     import { AppRoutingModule } from './app-routing.module'; 
 
     import { CoreModule } from './core/core.module'; 
 
     import { AuthModule } from './auth/auth.module'; 
 
     import { PartialsModule } from './partials/partials.module'; 
 

 
     import { AppComponent } from './app.component'; 
 

 
     const modules = [ 
 
      BrowserModule, 
 
      FormsModule,  
 
      HttpModule, 
 
      CoreModule, 
 
      AuthModule, 
 
      PartialsModule, 
 
     // FeaturesModule, I remove the import declaration, only app- routing.module.ts imports my module for Lazy Loading 
 
      AppRoutingModule 
 
     ]; 
 

 
     const components = [ 
 
      AppComponent 
 
     ]; 
 

 
     @NgModule({ 
 
      declarations: [ 
 
      ...components 
 
      ], 
 
      imports: [ 
 
      ...modules 
 
      ], 
 
      providers: [], 
 
      bootstrap: [...components] 
 
     }) 
 
     export class AppModule { }

In meinem app-Routing-module.ts:

const routePath = 'features'; 
 

 
const routeData = { 
 
    info: { 
 
     title: 'Features', 
 
     withoutNavigate: true 
 
    } 
 
}; 
 

 
const featuresRoutes: Routes = [ 
 
    { path: routePath, loadChildren:() => OrderModule , data: routeData} 
 
]; 
 

 
@NgModule({ 
 
    imports: [ 
 
    RouterModule.forChild(featuresRoutes) 
 
    ], 
 
    exports: [ 
 
    RouterModule 
 
    ] 
 
}) 
 
export class FeaturesRoutingModule {}

In meinem order-routing.module.ts:

const orderRoutes: Routes = [ 
 
     { path: 'order', component: OrderListComponent, data: { info: { title: 'Orders' } } } 
 
    ]; 
 

 
    @NgModule({ 
 
     imports: [ 
 
     RouterModule.forChild(orderRoutes) 
 
     ], 
 
     exports: [ 
 
     RouterModule 
 
     ] 
 
    }) 
 
    export class OrderRoutingModule {}

I Gonna ein Repository mit dieser Architektur in Github schaffen, ich Gonna Update dieser Kommentar mit dem Link.

Danke!