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

时间：2018-05-03 07:15:16

标签： javascript angular webpack angular-cli angular5

目前，我正在处理一个托管在客户端服务器上的项目。对于新的＆＃39;模块＆＃39; 无意重新编译整个应用程序。也就是说，客户端希望在运行时更新路由器/延​​迟加载的模块。我尝试了几件事，但我无法让它发挥作用。我想知道你们中是否有人知道我还能尝试什么，或者我错过了什么。

我注意到的一件事是，在构建应用程序时，我尝试使用angular cli的大部分资源都被webpack捆绑到单独的块中。这似乎是合乎逻辑的，因为它使用了webpack代码拆分。但是如果在编译时模块还不知道怎么办（但是编译后的模块存储在服务器的某个地方）？捆绑不起作用，因为它无法找到要导入的模块。并且使用SystemJS将在系统上找到时加载UMD模块，但也会通过webpack捆绑在一个单独的块中。

我已尝试过的一些资源;

我已经尝试并实施了一些代码，但目前还没有工作;

使用普通的module.ts文件扩展路由器

     this.router.config.push({
    path: "external",
    loadChildren: () =>
      System.import("./module/external.module").then(
        module => module["ExternalModule"],
        () => {
          throw { loadChunkError: true };
        }
      )
  });

UMD包的正常SystemJS导入

System.import("./external/bundles/external.umd.js").then(modules => {
  console.log(modules);
  this.compiler.compileModuleAndAllComponentsAsync(modules['External']).then(compiled => {
    const m = compiled.ngModuleFactory.create(this.injector);
    const factory = compiled.componentFactories[0];
    const cmp = factory.create(this.injector, [], null, m);

    });
});

导入外部模块，不使用webpack（afaik）

const url = 'https://gist.githubusercontent.com/dianadujing/a7bbbf191349182e1d459286dba0282f/raw/c23281f8c5fabb10ab9d144489316919e4233d11/app.module.ts';
const importer = (url:any) => Observable.fromPromise(System.import(url));
console.log('importer:', importer);
importer(url)
  .subscribe((modules) => {
    console.log('modules:', modules, modules['AppModule']);
    this.cfr = this.compiler.compileModuleAndAllComponentsSync(modules['AppModule']);
    console.log(this.cfr,',', this.cfr.componentFactories[0]);
    this.external.createComponent(this.cfr.componentFactories[0], 0);
});

使用SystemJsNgModuleLoader 

this.loader.load('app/lazy/lazy.module#LazyModule').then((moduleFactory: NgModuleFactory<any>) => {
  console.log(moduleFactory);
  const entryComponent = (<any>moduleFactory.moduleType).entry;
  const moduleRef = moduleFactory.create(this.injector);

  const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
});

尝试加载使用汇总的模块

this.http.get(`./myplugin/${metadataFileName}`)
  .map(res => res.json())
  .map((metadata: PluginMetadata) => {

    // create the element to load in the module and factories
    const script = document.createElement('script');
    script.src = `./myplugin/${factoryFileName}`;

    script.onload = () => {
      //rollup builds the bundle so it's attached to the window object when loaded in
      const moduleFactory: NgModuleFactory<any> = window[metadata.name][metadata.moduleName + factorySuffix];
      const moduleRef = moduleFactory.create(this.injector);

      //use the entry point token to grab the component type that we should be rendering
      const compType = moduleRef.injector.get(pluginEntryPointToken);
      const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(compType); 
// Works perfectly in debug, but when building for production it returns an error 'cannot find name Component of undefined' 
// Not getting it to work with the router module.
    }

    document.head.appendChild(script);

  }).subscribe();

SystemJsNgModuleLoader示例仅在模块已经提供为“懒惰”时才有效。应用程序的RouterModule中的路由（当使用webpack构建时将其转换为块）

我在StackOverflow上找到了很多关于这个主题的讨论，如果事先知道的话，提供的解决方案似乎非常适合动态加载模块/组件。但没有一个适合我们的项目用例。请让我知道我仍然可以尝试或深入研究。

谢谢！

编辑：我发现了; https://github.com/kirjs/angular-dynamic-module-loading并试一试。

更新：我创建了一个存储库，其中包含使用SystemJS动态加载模块的示例（以及使用Angular 6）; https://github.com/lmeijdam/angular-umd-dynamic-example

7 个答案:

答案 0 :(得分：10)

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

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”]

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

答案 1 :(得分：4)

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

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

答案 2 :(得分：2)

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

答案 3 :(得分：2)

使用angular 6库执行此操作，然后汇总即可完成操作。我刚刚进行了试验，可以与主应用程序共享独立的角度AOT模块，而无需最后重建。

  1. 在角度库中将angularCompilerOptions.skipTemplateCodegen设置为false，然后在构建库后将获得模块工厂。
  2. 之后，用如下所示的汇总构建一个umd模块： rollup dist/plugin/esm2015/lib/plugin.module.ngfactory.js --file src/assets/plugin.module.umd.js --format umd --name plugin
  3. 在主应用程序中加载文本源umd包并与模块上下文进行评估
  4. 现在您可以从导出对象访问ModuleFactory

在https://github.com/iwnow/angular-plugin-example中，您可以找到如何使用独立的构建和AOT开发插件

答案 4 :(得分：0)

是的，您可以通过将模块引用为路由器中的模块来延迟加载模块。以下是https://github.com/start-angular/SB-Admin-BS4-Angular-6

的示例
  1. 首先将您使用的所有组件合并到一个模块中
  2. 现在在路由器中引用该模块，angular会将模块延迟加载到视图中。

答案 5 :(得分：0)

我已经在Angular 6中进行了测试，以下解决方案适用于从外部包或内部模块动态加载模块。

1。如果要从库项目或包中动态加载模块，请执行以下操作：

我有一个图书馆项目“ admin”（或者您可以使用一个软件包）和一个应用程序项目“ app”。 在我的“ admin”库项目中，我有AdminModule和AdminRoutingModule。 在我的“应用”项目中：

a。在tsconfig.app.json中进行更改：

  "compilerOptions": {
    "module": "esNext",
  },

b。在app-routing.module.ts中：

const routes: Routes = [
    {
        path: 'admin',
        loadChildren: async () => {
            const a = await import('admin')
            return a['AdminModule'];
        }
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

2。如果要从同一项目加载模块。

有4种不同的选项：

a。在app-routing.module.ts中：

const routes: Routes = [
    {
        path: 'example',
        /* Options 1: Use component */
        // component: ExampleComponent,  // Load router from component
        /* Options 2: Use Angular default lazy load syntax */
        loadChildren: './example/example.module#ExampleModule',  // lazy load router from module
        /* Options 3: Use Module */
        // loadChildren: () => ExampleModule, // load router from module
        /* Options 4: Use esNext, you need to change tsconfig.app.json */
        /*
        loadChildren: async () => {
            const a = await import('./example/example.module')
            return a['ExampleModule'];
        }
        */
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}
``

答案 6 :(得分：0)

不起作用

System.import('http://lab.azaas.com:52048/my-component-library.umd.js').then(module => {
        console.log(module);
 });

工作

System.import('./../../assets/umds/my-component-library.umd.js').then(module => {
        console.log(module);
});
相关问题
最新问题