К сожалению, кажется, лучше не идти хакерскими путями и ждать официального решения
gular5 я пытаюсь получить компиляцию AOT для большинства моих модулей / компонентов в одном проекте ... но у меня есть одна часть, которую нужно скомпилировать JIT.
Для этой второй части HTML взят из Ajax-запроса и содержит некоторый компонентный тег, который должен быть скомпилирован angular. Для управления этой частью я использую директиву, которая выглядит следующим образом:
export class ArticleLiveDirective implements OnInit, OnChanges, OnDestroy {
// [...]
constructor(
private container: ViewContainerRef,
private compiler: Compiler
) { }
// [...]
private addHtmlComponent(template: string, properties: any = {}) {
this.container.clear();
//Force always rootDomElement.
const divTag = document.createElement('div');
divTag.setAttribute('id',this.currentId);
divTag.innerHTML = template;
template = divTag.outerHTML;
// We create dynamic component with injected template
@Component({ template })
class ArticleLIveComponent implements OnInit, OnChanges, OnDestroy {
constructor(
private articleService: ArticleService
) {}
ngOnInit() {}
ngOnChanges(changes: SimpleChanges) {}
ngOnDestroy() {}
goToPage($event: Event, pagination: string) {
this.articleService.askToChangeArticle(pagination);
//Stop propagation
$event.stopPropagation();
return false;
}
}
// we declare module with all dependencies
@NgModule({
declarations: [
ArticleLIveComponent
],
imports: [
BrowserModule,
MatTabsModule
],
providers: []
})
class ArticleLiveModule {}
// we compile it
const mod = this.compiler.compileModuleAndAllComponentsSync(ArticleLiveModule);
const factory = mod.componentFactories.find((comp) =>
comp.componentType === ArticleLIveComponent
);
// fetch instance of fresh crafted component
const component = this.container.createComponent(factory);
// we inject parameter.
Object.assign(component.instance, properties);
}
}
Как видите, я могу позвонитьaddHtmlComponent метод для компиляции нового компонента во время выполнения с пользовательским HTML в качестве шаблона.
Мой шаблон выглядит так:
<div>
<h2>Foo bar</h2>
<mat-tab-group>
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
<p>Other content</p>
все работает отлично, пока я не переключусь на компиляцию AOT (к примеру, я использую:https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack)
Возможная причина: Основная причина, которую я предполагаю, состоит в том, что компиляция AOT удаляет «компиляторную» часть Angular из выходного скомпилированного пакета.Что я попробую - Я пытался потребовать это прямо в моем коде, но все еще нет. - Я попытался проверить, как веб-сайт, например, угловой (или угловой материал) справляется с этим. Но не подходит для моего случая. Фактически, оба уже скомпилировали версию всех примеров в версии AOT. Динамическая часть - это «просто» контент вокруг сэмпла.
Если вы хотите проверить, как это делают угловые материалы: Все примеры веб-сайтов для каждого компонента:https://github.com/angular/material2/tree/master/src/material-examples
Тогда у них есть загрузчик:https://github.com/angular/material.angular.io/blob/master/src/app/shared/doc-viewer/doc-viewer.ts#L85
Это может быть правильным способом сделать это, но я не знаю, как адаптировать его для управления динамическим содержимым Tab.
РЕДАКТИРОВАТЬ : Я должен добавить образец здесь:https://github.com/yanis-git/aot-jit-angular (филиал Мастер)
Как вы увидите, компиляция AOT удаляет компилятор стены из пакета, этот результат:
Module not found: Error: Can't resolve '@angular/compiler/src/config'
Я пытался заставить компилятор Factory на AppModule, но по-прежнему безрезультатно.
У меня есть другой образец на том же репо, но на ветке "lazy-jit", теперь у меня есть компилятор, встроенный в поставляемый комплект, но новая ошибка приходит ко мне:
ERROR Error: No NgModule metadata found for 'ArticleLiveModule'.
Кто выглядит точно так же, как этот вопрос:https://github.com/angular/angular/issues/16033