Я создал простой веб-компонент через Angular, используя Pascal Precht учебник, который вы можете видеть, работая ЗДЕСЬ. Он автоматически настраивается в блоке Stackblitz по ссылке, но не локально.
Моя конечная цель - получить код для результирующего веб-компонента в отдельном файле локально. В конце концов, я загружу его где-нибудь и вытащу его через один <script>
, как обычные веб-компоненты raw-html/javascript. Я думаю, что вопрос говорит сам за себя, но вы можете прочитать подробности ниже, если хотите:
Детали:
Чтобы обобщить мой код в приведенной выше ссылке, у меня есть очень простой компонент:
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: '<h1>Hello world</h1>'
})
export class HelloComponent {}
и у меня есть модуль:
import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements'
import { HelloComponent } from './hello.component';
@NgModule({
imports: [BrowserModule],
declarations: [HelloComponent],
entryComponents: [HelloComponent]
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const HelloElement = createCustomElement(HelloComponent, {
injector: this.injector
});
customElements.define('hello-world', HelloElement);
}
}
Ниже приведено объяснение модуля выше:
- Добавьте мой компонент в массив
entryComponents
чтобы он не был вынут угловым шейкере (поскольку он недоступен при загрузке приложения:entryComponents: [HelloComponent]
-
Запустите мой компонент через функцию
createCustomElement
чтобы я мог использовать его как обычныйWeb Component
html:const HelloElement = createCustomElement (HelloComponent, {injector: this.injector});
-
Наконец, я прошу Angular скомпилировать этот компонент в
main.ts
:platformBrowserDynamic().bootstrapModule(AppModule);
Вот материал, который я читал/смотрел полностью (среди десятков других ссылок, большинство из которых датированы, как и оригинальные вставки Angular Elements):
Веб-компоненты от Scratch от Tomek Sułkowski (он никогда не компилирует его отдельно)
Веб-компоненты с CLI (та же проблема)
Веб-компоненты от Academinary (опять же, этот парень также использует их в приложениях Angular)
Спасибо за любую помощь.