Почему при сборке AOT, приложение падает с ошибкой «undefined is not iterable»?

Question

[Al]

Я использую Compiler из "@angular/core" для создания компонентов на лету. Обычная сборка отрабатывает нормально, приложение работает без проблем.
Но, когда я делаю сборку с флагом --prod, это включает в себя следующие опции сборки:

"optimization": true,
"outputHashing": "none",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true

После этого когда происходит вызов метода createCompiler() падает ошибка:

undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Вот как выглядит мой модуль в котором создается компилятор:

export function createJitCompiler() {
	return new JitCompilerFactory().createCompiler([{useJit: true}]);
}

@NgModule({
	imports: [
		CommonModule
	],
	exports: [
		DynamicComponent
	],
	declarations: [
		DynamicComponent
	]
})
export class DynamicLoaderModule {
	static forRoot(): ModuleWithProviders {
		return {
			ngModule: DynamicLoaderModule,
			providers: [
				{provide: Compiler, useFactory: createJitCompiler},
				{provide: NgModuleFactoryLoader, useClass: ModuleLoader}
			]
		}
	}
}

Я читал в этой статье о том что если использовать AOT-сборку, то компилятор будет не доступен во время выполнения приложения. И там же пишут что для решения данной проблемы можно создать отдельный модуль с сервисом, куда нужно будет вручную добавить компилятор.
Я сделал как там написано, но все равно проблема актуальна. Версия Angular 7.0.1.
Кто нибудь решал подобные задачи? Либо я что-то упустил?

Comments

[Al]

MaxKorz,

"для создания компонентов на лету"

в проекте есть компоненты которые загружаются на лету, т.е. есть некий компонент DynamicComponent, которые принимает с сервера метаданные в которых есть имя и параметры для компонента который нужно отобразить.
Делаю я это таким образом:

private loadComponent(metadata: ComponentMetadata, dc: Dynamic<any>): Promise<ComponentRef<any>> {
		return new Promise(resolve => {
			this.moduleLoader.load(metadata.path).then((moduleFactory: NgModuleFactory<any>) => {
				this.compiler.compileModuleAndAllComponentsAsync(moduleFactory.moduleType)
					.then((compiled: ModuleWithComponentFactories<any>) => {
						const cmpFactory = compiled.componentFactories.find((component) => {
							return component.componentType.name === metadata.code
						});
						const cmpRef: ComponentRef<any> = this.vc.createComponent(cmpFactory, 0, this.injector);
						cmpRef.instance.componentData = dc;
						cmpRef.changeDetectorRef.detectChanges();
						this.vc.insert(cmpRef.hostView);
						resolve();
					});
			});
		});
	}

Для этого и нужен JIT. Или есть инной способ решения такой задачи?

[Al]

MaxKorz, Нет-нет, если бы было все так просто я бы не задавал вопрос. В общем, с сервера прилетает json, в котором содержатся контент-слоты, в которых содержатся cms-компоненты. cms-компонент - это модель в которой содержатся метаданные (тип, path и проч) о самом компоненте, и данные которые нужно передать в компонент (см. cmpRef.instance.componentData = dc;), потом это все рендерится в конетйнер как видно в коде DynamicComponent. Такой компонент может быть и формой и баннером и вобще всем чем угодно.
Поэтому, мне нужно понять, как можно загрузить файл уже (js) скомпиленного компонета, создать инстанс, передать в него данные и дернуть его changeDetector - то как это работаем в моем примере без AOT

[Al]

MaxKorz, проблема в том, что даже в вашем примере компонент импортируется явно:

import { ElementComponent } from './element.component';

и если таких компонентов будет много, и все они явно за-импортированы - то бандл распухнет до огромных размеров.
Я могу как то через systemJS загрузить этот компонент из chunk'a?
Т.е. все компоненты (модули) при сборке компилятся в отдельные js-файлы, далее я загружаю этот скомпиленный js-файл (chunk) модуля с помощью например systemJS, и далее уже юзаю ComponentFactoryResolver.
Так можно сделать?

[Al]

MaxKorz, в том то и проблема что все приложение состоит из таких компонентов. Ну и когда дело дойдет до финальной версии, я уверен что бандл вырастет более 2 мб, что как по мне - очень критично

[Al]

MaxKorz, в общем поковырял я, и пришел к выводу что все таки можно сделать как я хочу, этот код работает с AOT и делает то что нужно, при этом JIT не используется:

this.moduleLoader.load(metadata.path).then((moduleFactory: NgModuleFactory<any>) => {
				const moduleRef: NgModuleRef<any> = moduleFactory.create(this.injector);
				const entryComponent = moduleRef["_providers"][0]._factories.entries().next().value[0];
				const cmpFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
				const cmpRef: ComponentRef<any> = this.vc.createComponent(cmpFactory, 0, this.injector);
				cmpRef.instance.componentData = dc;
				cmpRef.changeDetectorRef.detectChanges();
				this.vc.insert(cmpRef.hostView);
				resolve();

Этот пример я для теста сделал, собственно так можно из чанка получить компонент:

moduleRef["_providers"][0]._factories.entries().next().value[0];

и далее рендерить его. Но это очень костыльно, если есть идеи у вас то подбросьте, буду признателен)

Answer 1

[Артур Мустафин]

Посмотри тут JIT