如何手动延迟加载模块？

Question

我已经尝试加载没有使用路由器的模块SystemJsNgModuleLoader,但无法使其工作:

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

我正在Cannot find module xxx使用我用于URL的任何字符串(aboslute/relative urls/paths ...尝试了很多选项).我浏览了一下路由器源代码,然后找不到其他任何东西SystemJsNgModuleLoader.我甚至不确定我应该使用这个......

---

昨天在ng-europe 2016会议上就提出了这个问题--Miško和Matias回答说:

MiškoHevery: 只需要掌握模块,就可以从那里获得组件工厂,您可以在应用程序中的任何位置动态加载组件工厂.这正是路由器内部所做的事情.因此,你也可以做到这一点.

MatiasNiemelä 唯一值得注意的是,在[Ng]模块上有一些被调用的东西entryComponents,它可以识别可以延迟加载的组件 - 这是该组件集的入口.所以当你有懒惰加载的模块时,请把东西放进去entryComponents.

......但是,如果没有关于这个问题的例子和糟糕的文档,那就不是那么紧张的前进了;

任何人都知道如何手动加载模块,而不使用Route.loadChildren？如何掌握模块以及应该进入的内容究竟是什么entryComponents(我阅读常见问题解答,但不能在没有实际加载模块的情况下尝试)？

Answer 1

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

你可以SystemJsNgModuleLoader用来获取模块的工厂:

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

以下是它的外观:

lazy.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;
}

app.ts

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 repo angular-cli-lazy

使用webpack和AOT进行延迟加载

使用ngc编译

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

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

Github回购

Answer 2

[Angular 6]

你好,

我在这里分享我的解决方案,因为我没有找到如何在stackoverflow上没有路由器的lazyload.

该Yurzui的方式工作,但他使用的路由器模块编译懒模块,而我不希望使用它.

在我们的src/angular.json文件中,我们可以要求@ angular/cli将模块分开编译.

为此,我们lazyModules在"project">"your-app-name">"architect">"build">"options"中添加密钥.

像这样 :

  "$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

希望它可以帮助别人:)