Intro
Я пытаюсь создать свою собственную платформу для использования в Angular 7. Основная идея - предоставить платформу для рендеринга в терминал.Вот где я сейчас нахожусь:
Код
платформа-консоль / console-renderer.ts
(более или менее основанная на превосходном учебнике Виктора Савкина: Эксперименты с Angular Renderers )
import { Renderer2, RendererStyleFlags2, NgModule, RootRenderer, RendererFactory2, RendererType2, NgZone, APP_INITIALIZER, Injectable } from '@angular/core';
export type ConsoleNode = ConsoleElement | ConsoleText;
export class ConsoleRenderer extends Renderer2 {
// extremely basic renderer tree management in here -- not important right now
}
@Injectable()
export class ConsoleRendererFactory implements RendererFactory2 {
public defaultRenderer = new ConsoleRenderer();
createRenderer(hostElement: ConsoleNode, type: RendererType2): Renderer2 {
return this.defaultRenderer;
}
}
export function setUpRenderFlushing(zone: NgZone, rendererFactory: ConsoleRendererFactory) {
return () => {
zone.onStable.subscribe(() => {
console.group('--');
console.log(rendererFactory.defaultRenderer.root);
console.log(JSON.stringify(rendererFactory.defaultRenderer.root, null, 2));
console.groupEnd();
});
};
}
платформа-консоль / console.ts
(основано на платформах с угловым питанием )
/* imports, etc */
export const PLATFORM_CONSOLE_ID = 'console';
export const INTERNAL_CONSOLE_PLATFORM_PROVIDERS: StaticProvider[] = [
{ provide: PLATFORM_ID, useValue: PLATFORM_CONSOLE_ID },
{provide: COMPILER_OPTIONS, useValue: {}, multi: true},
{provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
{ provide: DOCUMENT, useFactory: getDocument, deps: [] }
]
export const platformConsole: (extraProviders?: StaticProvider[]) => PlatformRef =
createPlatformFactory(platformCore, 'console', INTERNAL_CONSOLE_PLATFORM_PROVIDERS);
export function getDocument(): any {
return document;
}
export function getErrorHandler(): ErrorHandler {
return new ErrorHandler();
}
export const CONSOLE_MODULE_PROVIDERS: StaticProvider[] = [
{ provide: APP_ROOT, useValue: true },
{ provide: ErrorHandler, useFactory: getErrorHandler, deps: [] },
{ provide: RendererFactory2, useClass: ConsoleRendererFactory, deps: [] },
{
provide: APP_INITIALIZER,
multi: true,
useFactory: setUpRenderFlushing,
deps: [NgZone, RendererFactory2]
}
];
@NgModule({
providers: CONSOLE_MODULE_PROVIDERS,
exports: [CommonModule, ApplicationModule]
})
export class ConsoleModule {
constructor(@Optional() @SkipSelf() @Inject(ConsoleModule) parentModule: ConsoleModule | null) {
if (parentModule) {
throw new Error(
`ConsoleModule has already been loaded.`
);
}
}
}
main.ts
(в моем тестовом приложении)
const __Zone_disable_XHR = true;
import 'zone.js';
import 'reflect-metadata';
import { enableProdMode, CompilerFactory, COMPILER_OPTIONS } from '@angular/core';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { platformConsole } from '../platform_console';
if (environment.production) {
enableProdMode();
}
platformConsole().bootstrapModule(AppModule)
.catch(err => console.error(err));
app.module.ts
(в моем тестовом приложении)
/* imports, etc */
@NgModule({
declarations: [
AppComponent,
ChildComponent
],
imports: [
ConsoleModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Я использую angular-build: server builder, потому что он кажется самым простым из всех.Все остальное - в значительной степени то, что вы получаете после того, как вы раскручиваете новое приложение Angular с помощью CLI.
Ошибка
Все прекрасно компилируется, в один файл main.js, но когда язапустить его, я получаю сообщение об ошибке:
throw new Error("No NgModule metadata found for '" + stringify(type) + "'.");
^
Error: No NgModule metadata found for 'AppModule'.
at NgModuleResolver.resolve ((project root)\node_modules\@angular\compiler\bundles\compiler.umd.js:20020:27)
at CompileMetadataResolver.getNgModuleMetadata ((project root)\node_modules\@angular\compiler\bundles\compiler.umd.js:18662:47)
at JitCompiler._loadModules ((project root)\node_modules\@angular\compiler\bundles\compiler.umd.js:26085:55)
at JitCompiler._compileModuleAndComponents ((project root)\node_modules\@angular\compiler\bundles\compiler.umd.js:26066:40)
at JitCompiler.compileModuleAsync ((project root)\node_modules\@angular\compiler\bundles\compiler.umd.js:26026:41)
at CompilerImpl.compileModuleAsync ((project root)\node_modules\@angular\platform-browser-dynamic\bundles\platform-browser-dynamic.umd.js:202:35)
at compileNgModuleFactory__PRE_R3__ ((project root)\node_modules\@angular\core\bundles\core.umd.js:17664:25)
at PlatformRef.bootstrapModule ((project root)\node_modules\@angular\core\bundles\core.umd.js:17847:20)
at Module../src/main.ts ((project root)\dist\main.js:444:77)
at __webpack_require__ ((project root)\dist\main.js:20:30)
Что мне здесь не хватает?Почему мои метаданные не попадают в скомпилированный пакет?
Интересно, так ли это, потому что я использую JitCompiler и, возможно, сборщик серверов обрабатывает мои файлы, как если бы они были Aot ... Если это такв случае, как мне создать и использовать AotCompiler без необходимости писать его с нуля?
Заметки
Мне удалось получить успешный запуск, используя только мой рендер, вставленный в PlatformServer., но я не смог получить доступ к Node изнутри моих компонентов (я думаю, что там есть какая-то браузерная песочница).Это соглашение, поскольку я намереваюсь достичь мечты о сочетании близости узлов на уровне операционной системы со всеми динамическими / реактивными качествами, предлагаемыми Angular et al.В конечном счете, я хотел бы расширить эту зарождающуюся платформу с помощью надлежащего EventManager, управляемого событиями Node, а также любых других сервисов, которые можно ожидать в терминале.
Мне трудно найти информацию о работе вэтот слой Angular.
Спасибо за ваше время.