redireccionar - Enrutador Angular2: cómo cargar correctamente los módulos secundarios con sus propias reglas de enrutamiento

rutas angular 5

Question

Aquí está mi estructura de aplicación Angular2:

Aquí es parte de mi código. El siguiente es el module principal de la aplicación Angular2, que importa sus reglas de enrutamiento y un módulo secundario ( EdgeModule ) y utiliza algunos componentes relacionados con algunas páginas.

app.module.ts

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

export class AppModule {
}

Aquí están las reglas de enrutamiento para el módulo principal. Tiene rutas para acceder a la página y la página no encontrada

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 });

Aquí está EdgeModule que declara el componente que usa e importa sus propias reglas de enrutamiento y 2 módulos secundarios ( FirstSectionModule y SecondSectionModule ).

edge.module.ts

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

export class EdgeModule {
}

Aquí están las reglas de enrutamiento para el módulo que carga, como puede ver, los componentes de la barra superior y la barra lateral.

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);

Finalmente, este es uno de los dos módulos secundarios, que tienen sus componentes e importa sus reglas de enrutamiento.

primera seccion.module.ts

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

export class FirstSectionModule {
}

Estas son las reglas de enrutamiento para las páginas (componentes) de FirstSectionModule

primera seccion.rutica.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);

Casi lo mismo sucede con los archivos second-section.module.ts y second-section.routing.ts .

Cuando ejecuto la aplicación, lo primero que se carga es la página relacionada con FirstSectionComponent , sin barra lateral ni barra superior.

¿Puedes decirme qué está mal con mi código? No hay errores en la consola.

Answer 1

En su app.routing.ts, solo hay 2 rutas y ninguna ruta incluida para navegar a la sección Principal (como en el diagrama). Debe haber una entrada de ruta con la propiedad loadchildren para que cargue el módulo para la sección Principal.

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

Esto cargará el resto de los módulos, las rutas de los componentes y todo dentro del EdgeModule.

Answer 2

Es un problema de inyección de dependencia. No necesitamos inyectar FirstSectionModule y SecondSectionModule en el EdgeModule y sobre la ruta que podemos usar dentro de FirstSectionModule y SecondSectionModule. Así que solo eliminarlo de edgeModule funcionará.

Answer 3

No estoy seguro de si consigo el problema correctamente, pero aquí hay un pequeño fragmento de código que utilicé para generar rutas dinámicamente:

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);
     ...
}

No es una solución OOTB, pero puede obtener información sobre las rutas actuales.

Answer 4

Puede intentarlo usando loadChildren donde homeModule, productMoudle, aboutModule tienen sus propias reglas de ruta.

 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);

y las reglas de la ruta de origen serán como

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}
        ]
    }
];

Esto también se conoce como carga perezosa de los módulos.

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

Hay algunas cosas importantes que notar aquí: usamos la propiedad loadChildren en lugar del componente. Pasamos una cadena en lugar de un símbolo para evitar cargar el módulo con impaciencia. Definimos no solo la ruta al módulo, sino también el nombre de la clase. No hay nada especial en LazyModule que no tenga su propio enrutamiento y un componente llamado LazyComponent.

Echa un vistazo a este tutorial impresionante relacionado con esto.

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