SystemJSNgModule.load работает и не работает

Question

Я пытаюсь динамически загрузить модуль, используя SystemJsNgModuleLoader.load(), и все отлично работает, используя stackblitz

Код очень прост.У меня есть модуль с именем 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

Есть советы?

Заранее спасибо !!

Answer 1

В этой статье описывается динамическая загрузка компонентов в 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