CODEWITHSUNDEEP
angularangular2-routing
Mike Marshall
Mike Marshall

Reputation: 7850

Angular2 RC and dynamic routes

We have a SPA app written in Angular which takes advantage of loading routes dynamically (as opposed to statically defined routes).

Over time, the number of these dynamically loaded UI components will grow and grow. For any given customer deployment, we will only be using a small subset of the possible components. At runtime, the list of components will be data driven. So my desire is to take that list of components and do the following: - define an application route for each component at runtime - lazy load that component

It’s a problem that has been solved in the Angular 1 version of our application (using ocLazyLoad package and angular’s $stateProvider)

It appears to be solvable in some of the later Beta releases of Angular2 (using AsyncRoutes and the router.config method - see technique here)

But in RC1 that AsyncRoutes and router.config method seems to be broken.

I can find very little with respect to guidance for loading components/routes asynchronously in the Angular2 release candidates.

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

Upvotes: 4

Views: 1228

Answers (2)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657731

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

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

Lazy loading components is now (RC.5) implemented using lazy modules.

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

Upvotes: 1

Long Field
Long Field

Reputation: 878

With RC5 ng2 team finally found a way to dynamically load router 1. AppModule is introduced and every is modulised ( back to AngularJS 1 date!) 2. "loadChildren" let you can load from files from disk:

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

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

Upvotes: 0

Related Questions