如何在角度4中依赖注入之前从服务器加载路由配置？

Question

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?

Answer 1

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.