问题 使用Angular CLI和Angular 5在运行时动态加载新模块

我遇到了同样的问题。据我所知，直到现在：

Webpack将所有资源放在一个包中并替换所有资源 System.import 同 __webpack_require__。因此，如果要在运行时使用SystemJsNgModuleLoader动态加载模块，则加载程序将在bundle中搜索模块。如果捆绑包中不存在该模块，则会出现错误。 Webpack不会向服务器询问该模块。这对我们来说是一个问题，因为我们想要在构建/编译时加载一个我们不知道的模块。 我们需要的是在运行时为我们加载模块的加载器（懒惰和动态）。在我的示例中，我使用的是SystemJS和Angular 6 / CLI。

1. 安装SystemJS：npm install systemjs -save
2. 将它添加到angular.json：“scripts”：[“node_modules / systemjs / dist / system.src.js”]

app.component.ts

import { Compiler, Component, Injector, ViewChild, ViewContainerRef } from '@angular/core';

import * as AngularCommon from '@angular/common';
import * as AngularCore from '@angular/core';

declare var SystemJS;

@Component({
  selector: 'app-root',
  template: '<button (click)="load()">Load</button><ng-container #vc></ng-container>'
})
export class AppComponent {
  @ViewChild('vc', {read: ViewContainerRef}) vc;

  constructor(private compiler: Compiler, 
              private injector: Injector) {
  }

  load() {
    // register the modules that we already loaded so that no HTTP request is made
    // in my case, the modules are already available in my bundle (bundled by webpack)
    SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
    SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));

    // now, import the new module
    SystemJS.import('my-dynamic.component.js').then((module) => {
      this.compiler.compileModuleAndAllComponentsAsync(module.default)
            .then((compiled) => {
                let moduleRef = compiled.ngModuleFactory.create(this.injector);
                let factory = compiled.componentFactories[0];
                if (factory) {
                    let component = this.vc.createComponent(factory);
                    let instance = component.instance;
                }
            });
    });
  }
}

我-dynamic.component.ts

import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Other } from './other';

@Component({
    selector: 'my-dynamic-component',
    template: '<h1>Dynamic component</h1><button (click)="LoadMore()">LoadMore</button>'
})    
export class MyDynamicComponent {
    LoadMore() {
        let other = new Other();
        other.hello();
    }
}
@NgModule({
    declarations: [MyDynamicComponent],
    imports: [CommonModule],
})
export default class MyDynamicModule {}

other.component.ts

export class Other {
    hello() {
        console.log("hello");
    }
}

如您所见，我们可以告诉SystemJS我们的包中已经存在哪些模块。所以我们不需要再加载它们（SystemJS.set）。我们导入的所有其他模块 my-dynamic-component （在这个例子中 other）将在运行时从服务器请求。

我遇到了同样的问题。据我所知，直到现在：

Webpack将所有资源放在一个包中并替换所有资源 System.import 同 __webpack_require__。因此，如果要在运行时使用SystemJsNgModuleLoader动态加载模块，则加载程序将在bundle中搜索模块。如果捆绑包中不存在该模块，则会出现错误。 Webpack不会向服务器询问该模块。这对我们来说是一个问题，因为我们想要在构建/编译时加载一个我们不知道的模块。 我们需要的是在运行时为我们加载模块的加载器（懒惰和动态）。在我的示例中，我使用的是SystemJS和Angular 6 / CLI。

1. 安装SystemJS：npm install systemjs -save
2. 将它添加到angular.json：“scripts”：[“node_modules / systemjs / dist / system.src.js”]

app.component.ts

import { Compiler, Component, Injector, ViewChild, ViewContainerRef } from '@angular/core';

import * as AngularCommon from '@angular/common';
import * as AngularCore from '@angular/core';

declare var SystemJS;

@Component({
  selector: 'app-root',
  template: '<button (click)="load()">Load</button><ng-container #vc></ng-container>'
})
export class AppComponent {
  @ViewChild('vc', {read: ViewContainerRef}) vc;

  constructor(private compiler: Compiler, 
              private injector: Injector) {
  }

  load() {
    // register the modules that we already loaded so that no HTTP request is made
    // in my case, the modules are already available in my bundle (bundled by webpack)
    SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
    SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));

    // now, import the new module
    SystemJS.import('my-dynamic.component.js').then((module) => {
      this.compiler.compileModuleAndAllComponentsAsync(module.default)
            .then((compiled) => {
                let moduleRef = compiled.ngModuleFactory.create(this.injector);
                let factory = compiled.componentFactories[0];
                if (factory) {
                    let component = this.vc.createComponent(factory);
                    let instance = component.instance;
                }
            });
    });
  }
}

我-dynamic.component.ts

import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Other } from './other';

@Component({
    selector: 'my-dynamic-component',
    template: '<h1>Dynamic component</h1><button (click)="LoadMore()">LoadMore</button>'
})    
export class MyDynamicComponent {
    LoadMore() {
        let other = new Other();
        other.hello();
    }
}
@NgModule({
    declarations: [MyDynamicComponent],
    imports: [CommonModule],
})
export default class MyDynamicModule {}

other.component.ts

export class Other {
    hello() {
        console.log("hello");
    }
}

如您所见，我们可以告诉SystemJS我们的包中已经存在哪些模块。所以我们不需要再加载它们（SystemJS.set）。我们导入的所有其他模块 my-dynamic-component （在这个例子中 other）将在运行时从服务器请求。