Dynamically loading components in Angular2 RC.5

Question

Considering the new changes that came out with the new RC I'm a bit lost at how I should approach this problem.

I have a .json file containing the name and path for the components I want to dinamically load. I can change the structure of this file if needed :

Example:

[
  {"component": "Comp1", "path": "./comp1.js"},
  {"component": "Comp2", "path": "./comp2.js"}
]

Until now I've used to load the JSON, System import the js files, save them in an array and simply reset the router config. Here's a really old and outdated version but the principle is the same: http://embed.plnkr.co/jAmMZKz2VqponmFtPpes/

I'm also interested in having those components lazy load. No clue on how to do that yet.

Now the ideas that came to my mind on how I could do this:

1. Get the json before bootstraping and pass it to the router. Would prefer not doing this since it isn't really "the angular2 way".

2. Doing a LoadNextToContent every time the user requires a dynamically loaded component and removing it when he is done using it.

Are there easier ways to do this? Better ways performance wise?

Answer 1

If you are talking about ng2 rc 5, then NgModule has been introduced and that just like angularj 1 module concept. remember you are loading module, not components Set up rootModule as:

  import { AppComponent }  from './app.component';
  import { routing }        from './app.routing';
  @NgModule({
     imports:      [ BrowserModule,HttpModule,JsonpModule, routing ],
     declarations: [ AppComponent ],
     bootstrap:    [ AppComponent ]
})
 export class AppModule { }

And inside Inside ./app.routing.ts

const routes: Routes= GetScreens();
export const routing = RouterModule.forRoot(routes);
function GetScreens(){
var results :Array<Object> = Array<Object>();
let screens :Array<string> = ["page1","page2","page3"]

results.push({ path: '' ,redirectTo: 'welcome', pathMatch: 'full'});
results.push({ path: 'welcome', loadChildren: 'app/screens/welcome.module' })
screens.map(screenId => results.push({path: screenId, loadChildren: 'app/screens/' + screenId + '.module' }))
return results 
}

Adn finally here you want :{ path: 'welcome', loadChildren: 'app/screens/welcome.module' }.

"ap/screens/welcom.module.ts" is a file on you disk.

let screens :Array<string> = ["page1","page2","page3"]

here array for screen names can be read from json call. in http://plnkr.co/edit/nm5m7N?p=preview you can find full details above and check app/MyRouterLinks.ts, it calls and gets json file to load component. Or see source code: https://github.com/Longfld/DynamicalRouter