My top menu module doesn't know anything about routes and modules, that will be used for menu items before they load from 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 {
};
Now i just use routeConfig as global variable and make request from pure javascript before angular imports module. How to do it correctly?
As Gunter said, we can delay bootstrap method and pass some parameters like that. But it is a wrong way in my case. In angular we can redefine routing in our application. So we can leave initialization parameter for RouterModule empty:
@NgModule({
imports: [ BrowserModule, RouterModule.forRoot([]), HttpModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
But then redefine them after web api retrieve us callback with route configuration:
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));
}
}
Here is an example in Plunker.