Async load routes data and build route instruction for Angular 2

Question

I try to build dynamically routes from angular2 (fetch route config from server), after that I parse it and generate instruction for component route (I have parent routes co

Answer 1

In the new router (>= RC.3) https://angular.io/docs/js/latest/api/router/index/Router-class.html#!#resetConfig-anchor resetConfig can be used

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ] }
]);

See also https://github.com/angular/angular/issues/9472#issuecomment-229230093

• You can load components asynchronously by providing a SystemJsComponentResolver.
• Right now, you can load routes asynchronously and imperatively update the configuration using resetConfig.
• Once AppModules are in master, we will utilize those to implement async loading of subconfigs.

https://github.com/angular/angular/issues/11437#issuecomment-245995186 provides an RC.6 Plunker

Answer 2

Using Observables/Promises to provide route translations is not a reliable solution, hence the Angular router expects Route[] or Routes, but an HTTP request can only return an Observable/Promise.

The Angular app gets initialized, but the retrieval process of route translations still goes on using Observables/Promises.

As Thierry Templier said, to get your configuration before bootstrapping your application would solve the problem.

Also, check the @ngx-i18n-router/core on github.

Answer 3

Check this: DynamicalAsyncRouter

https://github.com/Longfld/DynamicalAsyncRouter

Answer 4

An option could be to get your configuration before bootstrapping your application.

var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
var http = injector.get(Http);

http.get('routes.json').map(res => res.json())
  .subscribe(data => {
    bootstrap(AppComponent, [
      HTTP_PROVIDERS
      provide('routesConfig', { useValue: data })
    ]);
  });

Then you can have access the routes configuration by dependency injection and in a synchronous way:

@Component({
  (...)
})
export class AppComponent {
  constructor(@Inject('routesConfig') private routesConfig, private router:Router) {
    // Configure here your routes
  }
}

These two questions could help you:

• How to bootstrap an Angular 2 application asynchronously
• angular2 bootstrap with data from ajax call(s)

Edit

You can leverage the Observable.forkJoin method to load your route configuration from different requests:

var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
var http = injector.get(Http);

Observable.forkJoin([
  http.get('mainRoutes.json'),
  http.get('childRoutes.json')
])
.map(responses => {
  return {
    main: res[0].json(),
    children: res[1].json()
   };
 })
  .subscribe(data => {
    bootstrap(AppComponent, [
      HTTP_PROVIDERS
      provide('routesConfig', { useValue: data })
    ]);
  });

Edit1

I think that you could try something like that:

[
  {
    path: '/patients/...',
    name: 'Patients',
    component: PatientsComponent,
    childRoutes: [
      {
        path: '/',      // root is appRoot/patients/...
        name: 'PatientsList', component...
      },
      (...)
    ]
  }
]

But you need to split the content to get different elements according to the hints you want to handle:

• one for the root:

  [
    {
      path: '/patients/...',
      name: 'Patients',
      component: PatientsComponent
    }
  ]
  

• several for children. For example for patients:

  [
    {
      path: '/',      // root is appRoot/patients/...
      name: 'PatientsList', component...
    },
    (...)
  ]