Initial dynamic import support

[clydin]

This adds the additionalLazyModules option to the AngularCompilerPlugin which allows a developer to add support for additional lazy modules not found via static analysis of the router configuration.

Also adds a lazyModules option to the app section of .angular-cli.json. Paths are relative to the applications root configuration option.

lazyModules: [
  "app/lazy/lazy.module"
]

Example Component:

import { Component, SystemJsNgModuleLoader } from '@angular/core';

// Only use for type information and the module will not be eagerly loaded
import { LazyModule } from './lazy/lazy.module';

@Component({
  selector: 'app-example',
})
export class ExampleComponent {
  constructor(loader: SystemJsNgModuleLoader) {
    // Module will be split at build time and loaded when requested below
    loader.load('app/lazy/lazy.module#LazyModule')
      .then((factory: NgModuleFactory<LazyModule>) => { /* Use factory here */ });
  }
}

The module path passed to the load method should be the full name of the module specified in the application configuration plus the # separator and class name from the file; or nothing additional for the default export. This is the same format that the loadChildren router configuration option uses.

[sujithgowda]

Hello clydin,
This creates factory class chunk for only the module. what if I need a component along with the module?

Regards,
Sujith

[clydin]

You need to use the module factory to create a module reference which in turn can be used to create component factories for the module's defined entry components. Components are not loaded independently.

[sujithgowda]

yes, we are currently doing it by hacking the loadchildren of route module, which creates a chunk which contains ngfactory of lazy module and all the referenced component's ngfactories.
when I refer the lazy module in lazyroutes array of angular-cli.json file, the chunk created contains only the ngfactory of the lazy module and not the ngfactories of the component referenced inside the lazy module.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}