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

Question

voici mon Angular2 application de la structure:

Voici la partie de mon code. Le suivant est le principal module de la Angular2 application, qu'importe ses règles de routage et d'un enfant du module (EdgeModule) et utilise des composants liés à certaines pages.

app.le 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 ont des chemins d'accès à la page de connexion et impossible de trouver la page.

app.le routage.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 les composants qu'elle utilise et importer ses propres règles de routage et 2 enfants modules (FirstSectionModule et SecondSectionModule).

bord.le 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 se charge, comme vous pouvez le voir, topbar et la barre latérale composants.

bord.le routage.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, c'est l'un des deux enfants du module, qui ont ses composants et les importations ses règles de routage.

la première section.le 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 l' FirstSectionModule

la première section.le routage.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 fichiers.

Quand je lance l'application, la première chose qui charge la page correspondante FirstSectionComponent, avec aucune barre latérale ni topbar.

Pouvez-vous me dire quel est le problème avec mon code? Il n'y a pas d'erreurs dans la console.

Answer 1

Vous pouvez essayer ceci à l'aide d'loadChildren où la homeModule ,productMoudle, aboutModule ont leurs propres règles d'acheminement.

 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 la maison de l'itinéraire règles sera 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 connu comme paresseux, le chargement des modules.

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

Il ya quelques choses importantes à noter ici: Nous utilisons la propriété loadChildren au lieu de composant. Nous avons passer une chaîne de caractères au lieu d'un symbole pour éviter de charger le module avec impatience. Nous avons non seulement définir le chemin d'accès au module, mais le nom de la classe ainsi. Il n'y a rien de spécial à propos de LazyModule les autres qu'il a son propre routage et un composant appelé LazyComponent.

Checkout ce super tutoriel lié à ce.

https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

Answer 2

Dans votre app.rting.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 d’itinéraire avec la propriété de loadchildren ainsi il chargera le module pour la section principale.

Cela chargera le reste des modules, des itinéraires de composants et tout ce qui insite le EdgeModule.

Answer 3

Je ne sais pas si je reçois le problème correctement, mais voici un petit extrait de code que j’ai utilisé pour générer des itinéraires dynamiquement:

app.component.ts:

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

Answer 4

C’est un problème d’injection de dépendance. Nous n’avons pas besoin d’injecter FirstSectionModule et SecondSectionModule dans le edgeModule et sur l’itinéraire que nous pouvons utiliser à l’intérieur de FirstSectionModule et SecondSectionModule. Donc, il suffit de le retirer de edgeModule fonctionnera.