如何手动延迟加载模块？

我已经尝试加载没有路由器使用SystemJsNgModuleLoader模块，但无法让它工作：

 this.loader.load(url).then(console.info); 

我越来越Cannot find module xxx的任何string我使用的URL（aboslute /相对URL /path…尝试了很多select）。 我查看了路由器的源代码，找不到其他的SystemJsNgModuleLoader 。 我甚至不知道我应该用这个…

---

这个问题昨天在ng-europe 2016会议上被问到 – Miško＆Matias回答说：

MiškoHevery：只需要抓住模块 ，从那里你可以获得组件工厂，你可以在应用程序的任何地方dynamic加载组件工厂。 这正是路由器在内部所做的。 所以你也这样做是相当困难的。

MatiasNiemelä唯一需要注意的是在[Ng]模块上有一个名为entryComponents的东西，它标识了可能被延迟加载的组件 – 这是进入该组件集的东西。 所以当你有加载的模块时，请把这些东西放到entryComponents 。

…但是这个问题不是没有例子，也没有关于这个问题的不好的文件（;

任何人都知道如何手动加载模块，而不使用Route.loadChildren ？ 如何获得模块 ，什么东西 ，应该进入entryComponents （我读了FAQ ，但不能没有实际加载模块尝试）？

Answer 1

任何人都知道如何手动加载模块，而不使用Route.loadChildren？

它可能看起来像这样：

 this.loader.load('./src/test.module#TestModule').then((factory: NgModuleFactory<any>) => { console.log(factory); }); 

TestModule位于./src/test.module.ts文件（绝对path）

Plunker例子

这也是更高级的例子：

• https://github.com/angular/angular/issues/11738

如果您不像以下那样声明性加载组件：

 <my-comp></my-comp> 

在你的模板中，如果你想使用这个组件来dynamic加载，那么你必须通过以下方法之一来处理entryComponent中的这个组件：

• 您的@NMModule中的entryComponents数组

• 您的@Component中的entryComponents数组

• ANALYZE_FOR_ENTRY_COMPONENTS （angular路由器使用此方法https://github.com/angular/angular/blob/2.1.2/modules/%40angular/router/src/router_module.ts#L198 ）

编译器像这样创build工厂：

为每个entryComponent – host.factory.js

为每个组件component.ngfactory.js

也可以看看

• 延迟加载标签的例子

Angular-cli示例

app.module.ts

 providers: [ SystemJsNgModuleLoader, provideRoutes([ { loadChildren: 'app/lazy/lazy.module#LazyModule' } ]) ], 

app.component.ts

 export class AppComponent implements OnInit { title = 'Angular cli Example SystemJsNgModuleLoader.load'; @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef; constructor(private loader: SystemJsNgModuleLoader, private inj: Injector) {} ngOnInit() { this.loader.load('app/lazy/lazy.module#LazyModule').then((moduleFactory: NgModuleFactory<any>) => { const entryComponent = (<any>moduleFactory.moduleType).entry; const moduleRef = moduleFactory.create(this.inj); const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent); this.container.createComponent(compFactory); }); } } 

它也将与AOT合作

Githug回购angular-cli-懒惰

用webpack和AOT延迟加载

使用ngc编译

使用下面的工厂初始化编译器

 export function createJitCompiler () { return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler(); } 

Github回购