时间戳

首页 > 解决方案 > SystemJSNgModule.load 工作并失败

angular - SystemJSNgModule.load 工作并失败

问题描述

我正在尝试使用stackblitzSystemJsNgModuleLoader.load()动态加载模块，并且一切正常

代码非常简单。我有一个名为lazy的模块，要动态加载模块，app.component.ts中的代码如下：

constructor(private loader: SystemJsNgModuleLoader) {}

async ngOnInit() {
    try {
       const module = await this.loader.load('src/app/lazy/lazy.module#LazyModule');
      console.log(module)
    } catch(err) {
        console.log(err)
    }
  }

此时一切正常，但是当我在我的计算机上做同样的事情时，使用相同的包依赖项，它不起作用。

打字稿配置文件或类似的东西可能有问题吗？

我得到了这个错误。错误：找不到模块 'src/app/lazy/lazy.module'我从 stackblitz

下载了项目，安装了包依赖项，但是当我运行应用程序时，我仍然面临同样的错误。

I'm using node: v8.11.1ts
typescript: 2.4.2
npm: 5.8

有小费吗？

提前致谢！！

标签： angularangular5angular6

解决方案

本文描述了 Angular 中的动态组件加载以及与使用 SystemJsNgModuleLoader 相关的问题。特别是在应用程序的生产版本中缺少编译器。

解决问题的一种更简单的方法是将 js 加载和角度编译阶段分开。以下代码是一个示例：

declare var SystemJS;

import {
  Compiler,
  ComponentFactory,
  Injectable,
  ModuleWithComponentFactories
} from '@angular/core';

/** Load Component factories dynamically using Systemjs
 */
@Injectable()
export class ComponentLoaderService {

  /** Cache of javascript modules indexed by its address */
  private readonly jsModules: {[module: string]: any};

  /** Cache of angular modules indexed by its address */
  private readonly ngModules: {[module: string]: ModuleWithComponentFactories<any>};


  constructor(private compiler: Compiler) {
    this.jsModules = {};
    this.ngModules = {};
  }

  public async factoryFor<T>(ngModule: string, selector: ComponentSelector): Promise<ComponentFactory<T>> {
    // compile angular module if not on the cache already
    if (!this.ngModules[ngModule]) {
      // split module address into jsModule and ngModule parts
      const [jsRef, ngRef] = ngModule.split('#');

      // load javascript module if not on the cache already
      if (!this.jsModules[jsRef]) {
        this.jsModules[jsRef] = await SystemJS.load(jsRef);
      }

      const jsModule = this.jsModules[jsRef];

      // check js module was loaded successfully
      if (!jsModule) {
        throw new Error('ComponentLoaderService: Javascript module without content');
      }

      // check Angular module was loaded successfully
      if (!jsModule[ngRef]) {
        throw new Error('ComponentLoaderService: Angular module not found');
      }

      this.ngModules[ngModule] =
        await this.compiler.compileModuleAndAllComponentsAsync(
          jsModule[ngRef]
        );
    }

    const ngModuleImpl = this.ngModules[ngModule];

    const componentFactory = ngModuleImpl.componentFactories
      .find(factory => factory.selector === selector);

    // check if component factory is defined
    if (!componentFactory) {
      throw new Error('ComponentLoaderService: Component factory not found');
    }

    return componentFactory;
  }
}

不要忘记将“node_modules/systemjs/dist/system.src.js”包含在 angular.json 文件中项目的脚本部分中

推荐阅读