web-dev-qa-db-fra.com

Routeur Angular2: comment charger correctement des modules enfants avec leurs propres règles de routage

voici ma structure d'application Angular2:

enter image description here

Voici une partie de mon code. Ce qui suit est le principal module de l'application Angular2, qui importe ses règles de routage et un module enfant (EdgeModule) et utilise certains composants liés à certaines pages.

app.module.ts 

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent,
        LoginComponent
    ],
    imports: [
        ...
        appRouting,
        EdgeModule
    ],
    providers: [
        appRoutingProviders,
        LoginService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

Voici les règles de routage pour le module principal. Il a des chemins pour se connecter page et page non trouvée.

app.routing.ts 

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '**', component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [];

export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true });

Voici EdgeModule qui déclare le composant qu’il utilise et importe ses propres règles de routage et deux modules enfants (FirstSectionModule et SecondSectionModule).

Edge.module.ts 

@NgModule({
    declarations: [
        EdgeComponent,
        SidebarComponent,
        TopbarComponent
    ],
    imports: [
        ...
        edgeRouting,
        FirstSectionModule,
        SecondSectionModule
    ],
    providers: [
        AuthGuard
    ]
})

export class EdgeModule {
}

Voici les règles de routage pour le module qui charge, comme vous pouvez le voir, les composants topbar et sidebar.

Edge.routing.ts 

Paths['edgePaths'] = {
    firstSection: 'firstSection',
    secondSection: 'secondSection'
};

const appRoutes: Routes = [
    { path: '', component: EdgeComponent,
        canActivate: [AuthGuard],
        children: [
            { path: Paths.edgePaths.firstSection, loadChildren: '../somepath/first-section.module#FirstModule' },
            { path: Paths.edgePaths.secondSection, loadChildren: '../someotherpath/second-section.module#SecondModule' },
            { path: '', redirectTo: edgePaths.dashboard, pathMatch: 'full' }
        ]
    }
];

export const edgeRouting = RouterModule.forChild(appRoutes);

Enfin, il s’agit d’un des deux modules enfants, qui a ses composants et importe ses règles de routage.

first-section.module.ts 

@NgModule({
    declarations: [
        FirstSectionComponent,
        SomeComponent
    ],
    imports: [
        ...
        firstSectionRouting
    ],
    providers: [
        AuthGuard,
    ]
})

export class FirstSectionModule {
}

Ce sont les règles de routage pour les pages (composants) de FirstSectionModule

first-section.routing.ts 

Paths['firstSectionPaths'] = {
    someSubPage: 'some-sub-page',
    someOtherSubPage: 'some-other-sub-page'
};

const appRoutes: Routes = [
    {
        path: '',
        children: [
            { path: Paths.firstSectionPaths.someSubPage, component: someSubPageComponent},
            { path: Paths.firstSectionPaths.someOtherSubPage, component: someOtherSubPageComponent},
            { path: '', component: AnagraficheComponent }
        ]
    }
];

export const firstSectionRouting = RouterModule.forChild(appRoutes);

Presque la même chose se passe pour second-section.module.ts et second-section.routing.ts des dossiers.

Lorsque je lance l'application, les premières choses qui se chargent sont la page liée à FirstSectionComponent, sans barre latérale ni barre supérieure.

Pouvez-vous me dire ce qui ne va pas avec mon code? Il n'y a pas d'erreur dans la console.

angularurl-routingangular2-routingnested-routesangular2-modules
33
smartmouse

Vous pouvez essayer ceci en utilisant loadChildren où homeModule, productModule, aboutModule ont leurs propres règles de routage.

const routes: Routes = [
    { path: 'home', loadChildren: 'app/areas/home/home.module#homeModule' },
    { path: 'product', loadChildren: 'app/areas/product/product.module#ProductModule' },
    { path: 'drawing', loadChildren: 'app/areas/about/about.module#AboutModule' }
];

export const appRouting = RouterModule.forRoot(routes);

et les règles de route à domicile seront comme

export const RouteConfig: Routes = [
    {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        children: [
            { path: '', component: HomePage },
            { path: 'test/:id', component: Testinfo},
            { path: 'test2/:id', component: Testinfo1},
            { path: 'test3/:id', component: Testinfo2}
        ]
    }
];

ceci est également appelé chargement paresseux des modules.

{ path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }

Il y a quelques points importants à noter ici: Nous utilisons la propriété loadChildren au lieu de composant. Nous passons une chaîne au lieu d'un symbole pour éviter de charger le module avec impatience. Nous définissons non seulement le chemin d'accès au module mais également le nom de la classe. La particularité de LazyModule est qu'elle possède son propre routage et un composant appelé LazyComponent.

Découvrez ce tutoriel génial lié à ceci: https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

8
Yashwanth Chowdary Kata

Dans votre app.routing.ts, il n'y a que 2 itinéraires et aucun itinéraire inclus pour naviguer vers la section principale (comme dans le diagramme). Il doit y avoir une entrée de route avec la propriété loadchildren afin de charger le module pour la section Main.

routes: Routes = [...
{ 
path: 'main', loadChildren: '<file path>/<Edge module file name>#EdgeModule' 
}
...];

Cela chargera le reste des modules, les itinéraires des composants et tout ce qui est inséré dans le EdgeModule.

1
CharithW

Je ne sais pas si j'obtiens le problème correctement, mais voici un petit extrait de code que j'ai utilisé pour générer des itinéraires de manière dynamique:

app.component.ts:

constructor(private _router: Router) {
}

ngOnInit() {
     ...
     this._router.config[0].children = myService.getRoutes(); 
     this._router.resetConfig(this._router.config);
     console.debug('Routes:', this._router.config);
     ...
}

Ce n'est pas OOTB solution, mais vous pouvez obtenir des informations sur les itinéraires actuels.

0
Sargon

C'est un problème d'injection de dépendance. Nous n'avons pas besoin d'injecter FirstSectionModule & SecondSectionModule dans le module edgeModule & à propos de la route que nous pouvons utiliser à l'intérieur de FirstSectionModule & SecondSectionModule. Il suffit donc de le retirer de EdgeModule.

0
Vivek Kumar