Mi módulo de menú superior no sabe nada sobre rutas y módulos, que se usarán para los elementos del menú antes de que se carguen desde la API.
var routeConfig = [ {loadChildren: "./widget1.ts#Widget1Module", path: "widget1.ts"}, {loadChildren: "./widget2.ts#Widget2Module", path: "widget2.ts"}, {loadChildren: "./widget3.ts#Widget3Module", path: "widget3.ts"} ]; // this must be loaded before AppRoutingModule inject @NgModule({ imports: [ RouterModule.forRoot( routeConfig ) ], exports: [ RouterModule ] }) export class AppRoutingModule { };Ahora solo uso routeConfig como variable global y hago una solicitud desde javascript puro antes del módulo de importaciones angulares. ¿Cómo hacerlo correctamente?
Como dijo Gunter, podemos retrasar el método de arranque y pasar algunos parámetros como ese . Pero es un camino equivocado en mi caso. En angular podemos redefinir el enrutamiento en nuestra aplicación. Entonces podemos dejar el parámetro de inicialización para RouterModule vacío:
@NgModule({ imports: [ BrowserModule, RouterModule.forRoot([]), HttpModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }Pero luego redefínalos después de que la API web nos recupere la devolución de llamada con la configuración de la ruta:
export class AppComponent implements OnInit { constructor(private router: Router, private http: Http) { } public isLoaded : bool = false; ngOnInit() { this.http.get('app/routerConfig.json') .map((res:any) => res.json()) .subscribe(data => { this.router.resetConfig(data); this.isLoaded = true; }, error => console.log(error)); } }Aquí hay un ejemplo en Plunker.