Как я могу создать AOT-совместимые "динамические" модули? (Произошла ошибка при статическом разрешении значений символов. Вызовы функций не поддерживаются.)

Я создаю приложение, которое будет содержать несколько маршрутов, каждый из которых определен как NgModule. Каждый модуль очень похож, поэтому я хотел бы абстрагировать его для многоразовой функции, которая принимает набор компонентов и создает верхний уровень @Component а также @NgModule,

Итак, вот один из этих модулей:

import { makeModule } from './module-factory';
import { Component } from '@angular/core';

@Component({
  selector: 'app-component-1',
  template: `<p>First Component</p>`
})
export class FirstComponent {}

@Component({
  selector: 'app-component-2',
  template: `<p>Second Component</p>`
})
export class SecondComponent {}

export const FooModule = makeModule('foo', [FirstComponent, SecondComponent]);

И вот makeModule() Функция, которую я пытаюсь построить:

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

export const makeEntryComponent = (components: any[]) => {
  @Component({
    template: `<p>Entry Component</p>
      <ng-container *ngFor="let component of components">
        <ng-container *ngComponentOutlet="component"></ng-container>
      </ng-container>
    `
  })
  class EntryComponent {
    components = components;
  }
  return EntryComponent;
};
export const makeModule = (componentName: string, components: any[]): any => {
  const EntryComponent = makeEntryComponent(components);
  const routes: Route[] = [{ path: componentName, component: EntryComponent }];
  const declarations = [EntryComponent, ...components];

  @NgModule({
    imports: [CommonModule, RouterModule.forChild(routes)],
    declarations,
    entryComponents: components,
    exports: [EntryComponent]
  })
  class Module {}
  return Module;
};

Так что это прекрасно работает с использованием JIT-компилятора, но как только я запускаю ng serve --aot, это терпит неудачу с:

ОШИБКА при ошибке: обнаружена ошибка при статическом разрешении значений символов. Вызовы функций не поддерживаются. Попробуйте заменить функцию или лямбду ссылкой на экспортированную функцию (позиция 18:27 в исходном файле.ts), разрешив символ makeModule в C:/Users/IGEN261/code/github/ng-dynamic/src/app/module-factory.ts, разрешение символа FooModule в C:/Users/IGEN261/code/github/ng-dynamic/src/app/foo.module.ts, разрешение символа FooModule в C: / Users / IGEN261 / code / github / ng -dynamic / src / app / foo.module.ts, разрешение символа AppModule в C:/Users/IGEN261/code/github/ng-dynamic/src/app/app.module.ts, разрешение символа AppModule в C: / Users /IGEN261/code/github/ng-dynamic/src/app/app.module.ts

Я чувствую, что должен быть способ сделать это совместимым с AOT, но я не знаю как. Должен ли я структурировать свой код по-другому? Или я должен отказаться от какой-либо перспективы DRY в этой кодовой базе, чтобы сделать ее AOT-совместимой?

К вашему сведению - полный проект доступен на GitHub здесь: https://github.com/mattdsteele/ng-dynamic-aot

0 ответов

Другие вопросы по тегам