Angular2 RC and dynamic routes

Question

We have a SPA application written in Angular that uses dynamic loading routes (as opposed to statically defined routes).

Over time, the number of these dynamically loaded user interface components will grow and grow. For any particular client deployment, we will use only a small subset of the possible components. At run time, the list of components will be data driven. Therefore, I want to take this list of components and do the following: - determine the application route for each component at runtime - lazy loading of this component

This is a problem that was solved in the version of our Angular 1 application (using the ocLazyLoad package and angular s $ stateProvider)

It seems to be solvable in some later beta versions of Angular2 (using AsyncRoutes and the router.config method - see the technique here )

But in RC1, that AsyncRoutes and the router.config method seem to be broken.

I can find very little regarding instructions for loading components / routes asynchronously in Angular2 release candidates.

Is there a canonical example for this with the latest candidates?

Answer 1

In the new router ( >= RC.3 ) https://angular.io/docs/ts/latest/api/router/index/Router-interface.html#!#resetConfig-anchor resetConfig you can use

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

Lazy loading components (RC.5) are now used using lazy modules.

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

Answer 2

The RC5 ng2 team finally found a way to dynamically load router 1. An AppModule is introduced, and each of them is modulated (back to AngularJS 1 date!) 2. "loadChildren" allows you to load files from disk:

 {path: screenId, loadChildren: 'app/screens/' + screenId + '.module' }) 

Here is my sample code: http://plnkr.co/edit/nm5m7N?p=preview