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

5 回答

• 4

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

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

  • 安装SystemJS：npm install systemjs -save

  • 将它添加到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;
                  }
              });
      });
    }
  }
  

  my-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 ）将在运行时从服务器请求 .

  回复于 2024-04-29T21:06:58+08:00
• 6

  我已经使用了Angular 6的库支持的https://github.com/kirjs/angular-dynamic-module-loading解决方案来创建我在Github上共享的应用程序 . 由于公司政策，它需要脱机 . 一旦有关示例项目源的讨论结束，我将在Github上分享它！

  更新：可以找到回购; https://github.com/lmeijdam/angular-umd-dynamic-example

  回复于 2024-04-29T21:06:58+08:00
• 0

  我相信如果使用webpack构建和运行主应用程序，使用SystemJS加载UMD包是可能的 . 我使用了一个使用ng-packagr来构建动态插件/插件模块的UMD包的解决方案 . 这个github演示了描述的过程：https://github.com/nmarra/dynamic-module-loading

  回复于 2024-04-29T21:06:58+08:00
• 2

  使用角度6库和汇总来做到这一点 . 我只是试验它，我可以与主应用程序共享独立的角度AOT模块，而无需重建最后 .

  • 在角度库中将angularCompilerOptions.skipTemplateCodegen设置为false，在构建库之后，您将获得模块工厂 .

  • 之后用这样的汇总构建一个umd模块：rollup dist / plugin / esm2015 / lib / plugin.module.ngfactory.js --file src / assets / plugin.module.umd.js --format umd --name plugin

  • 在主应用程序中加载文本源umd包并使用模块上下文对其进行评估

  • 现在您可以从exports对象访问ModuleFactory

  在这里https://github.com/iwnow/angular-plugin-example你可以找到如何开发插件独立建筑和AOT

  回复于 2024-04-29T21:06:58+08:00
• 2

  是的，您可以通过在路由器中将它们作为模块引用来延迟加载模块 . 这是一个例子https://github.com/start-angular/SB-Admin-BS4-Angular-6

  • 首先将您使用的所有组件连接到一个模块中

  • 现在在路由器中引用该模块，angular会将模块延迟加载到视图中 .

  回复于 2024-04-29T21:06:58+08:00