如何手动延迟加载模块？

Question

我试过使用SystemJsNgModuleLoader没有路由器的情况下加载模块，但无法让它工作：

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

对于我用于 URL 的任何字符串，我都Cannot find module xxx （绝对/相对 url/路径...尝试了很多选项）。 我查看了路由器源代码，除了这个SystemJsNgModuleLoader找不到任何其他东西。 我什至不确定我应该使用这个......

---

昨天在ng-europe 2016会议上提出了这个问题 - Miško & Matias 回答：

Miško Hevery：你只需要掌握模块，从那里你可以掌握组件工厂，你可以在应用程序中的任何地方动态加载组件工厂。 这正是路由器内部所做的。 所以你这样做也很困难。

Matias Niemelä唯一需要特别注意的是，在 [Ng]Module 上有一个叫做entryComponents的东西，它标识可以延迟加载的组件——这是该组件集的入口。 所以当你有延迟加载的模块时，请将这些东西放入entryComponents 。

...但如果没有关于该主题的示例和糟糕的文档，这并不是那么困难（;

任何人都知道如何在不使用Route.loadChildren情况下手动加载模块？ 如何获取模块以及应该进入entryComponents的内容到底是什么（我阅读了FAQ ，但不能在不实际加载模块的情况下尝试）？

Answer 1

任何人都知道如何在不使用 Route.loadChildren 的情况下手动加载模块？

您可以使用SystemJsNgModuleLoader来获取模块的工厂：

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

对于 Angular 8，请参阅 Angular 8 中的延迟加载模块

这是它的样子：

懒惰.module.ts

@Component({
  selector: 'test',
  template: `I'm lazy module`,
})
export class Test {}

@NgModule({
  imports: [CommonModule],
  declarations: [Test],
  entryComponents: [Test]
})
export class LazyModule {
  static entry = Test;
}

应用程序

import {
  Component, NgModule, ViewContainerRef,
  SystemJsNgModuleLoader, NgModuleFactory,
  Injector} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `<h2>Test lazy loading module</h2>`,
})
export class AppComponent {
  constructor(
    private loader: SystemJsNgModuleLoader, 
    private inj: Injector, 
    private vcRef: ViewContainerRef) {}

  ngOnInit() {
     this.loader.load('./src/lazy.module#LazyModule')
       .then((moduleFactory: NgModuleFactory<any>) => {
         const moduleRef = moduleFactory.create(this.inj);
         const entryComponent = (<any>moduleFactory.moduleType).entry;
         const compFactory = 
               moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
         this.vcRef.createComponent(compFactory);
      });
  }
} 

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [SystemJsNgModuleLoader],
  bootstrap: [ AppComponent ]
})
export class AppModule {} 

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

Plunker 示例

有两个选项可以为AOT预编译模块：

1) Angular CLI lazyModules 选项（自 Angular 6 起）

使用 angular/cli 内置功能：

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "lazyModules": [  <====== add here all your lazy modules
              "src/path-to.module"
            ]
          }
        }
      }
    }
  }
} 

看

• @RomainLT 回答
• 极品飞车：Angular 中的延迟加载不可路由模块一文了解更多详情

2) 使用来自 RouterModule 的 provideRoutes

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);
        });
    }
}

Github 仓库 angular-cli-lazy

---

使用 webpack 和 AOT 延迟加载

使用 ngc 编译

使用以下工厂初始化编译器

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

Github 仓库

Answer 2

[角6]

你好，

我在这里分享我的解决方案，因为我没有找到如何在 stackoverflow 上没有路由器的情况下延迟加载。

Yurzui的方式有效，但他使用 Router 模块来编译惰性模块，而我不想使用它。

在我们的src/angular.json文件中，我们可以要求@angular/cli编译一个模块。

为此，我们在“project”>“your-app-name”>“architect”>“build”>“options”中添加lazyModules键。

像这样 ：

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects", 
  "projects": {
    "lazy-load-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/lazy-custom-element-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "lazyModules": [
              "src/app/lazy-load/lazy-load.module",
              "src/app/another-lazy-load/another-lazy-load.module"
            ]

然后我们可以调用并加载我们编译的模块。

像这样 ：

export class LoaderComponent implements OnInit {

      // tag where we gonna inject the lazyload module and his default compononent "entry"
      @ViewChild('container', { read: ViewContainerRef }) viewRef: ViewContainerRef;

      constructor(
        private loader:     NgModuleFactoryLoader,
        private injector:   Injector,
        private moduleRef:  NgModuleRef<any>,) {
      }

      ngOnInit(): void {
       this.loader.load(this.pathModuleTemplate).then((moduleFactory: NgModuleFactory<any>) => {
          // our module had a static property 'entry' that references the component that  want to load by default with the module
          const entryComponent = (<any>moduleFactory.moduleType).entry;
          const moduleRef = moduleFactory.create(this.injector);
          const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
          this.viewRef.createComponent(compFactory);
        });
      }
}

来源： https : //github.com/angular/angular-cli/blob/9107f3cc4e66b25721311b5c9272ec00c2dea46f/packages/angular_devkit/build_angular/src/server/schema.json

希望它可以帮助某人:)