angular - 如何使用 Webpack 或 Angular CLI 将 Angular 元素编译成 Web 组件？

Question

我使用 Pascal Precht 的 tutorial 通过 Angular 构建了一个简单的 Web 组件，你可以看到它正在工作 HERE .它会在链接中的 Stackblitz 上自动神奇地编译，但不会在本地编译。

我的最终目标是将生成的 Web 组件的代码放在本地的单独文件中。最终，我会将其上传到某处并通过单个 <script> 将其拉入。标签，就像普通的 raw-html/javascript Web 组件一样。我认为这个问题不言而喻，但如果您愿意，可以阅读下面的详细信息:

---

详细信息:

在上面的链接中总结我的代码，我有一个非常基本的组件:

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);
  }
}

下面是对上面模块的解释:

1. 将我的组件添加到 entryComponents array 所以它不会被 Angular 摇树器取出(因为它在应用程序启动时无法访问: entryComponents: [HelloComponent]

2. 通过 createCustomElement 运行我的组件功能，以便我可以将其用作常规 html Web Component :

   const HelloElement = createCustomElement(HelloComponent, { 注入(inject)器:this.injector});

3. 最后，我要求 Angular 在 main.ts 中编译这个组件。 :

   platformBrowserDynamic().bootstrapModule(AppModule);

---

这是我完整阅读/观看的内容(在许多其他链接中——其中大部分都已过时，例如原始的 Angular Elements 介绍):

Web Components from Scratch by Tomek Sułkowski (他从不单独编译)
Web Components with CLI (同样的问题)
Web Components by Academind (再一次，这个人还在 Angular 应用程序中使用它们)

感谢您的帮助。

Answer 1

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HelloComponent } from './hello.component';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, HelloComponent],
  entryComponents: [HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

确保你使用

npm install --save @angular/elements并添加 "@webcomponents/custom-elements" : "^1.0.8"在 package.json 中。之后运行 npm install &除此之外，您还需要取消注释 polyfills.ts 中的以下行

这添加了自定义元素工作所需的 polyfill。

import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim';


<my-tag message="This is rendered dynamically">stack Overflow</my-tag>

Angular 不会编译上面的代码，但是 Angular 元素通过允许获取我们的 Angular 组件并将其放入完全封装的自引导 HTML 元素中来解决这个问题，您可以通过以下方式将其转储到您的 Angular 应用程序中，例如这仍然有效。

在 AppComponent.ts 文件中

 import { Component, Injector } from '@angular/core'; 
 import { createCustomElement } from '@angular/elements'
 import { DomSanitizer } from '@angular/platform-browser';

 import { HelloComponent } from './hello.component';

 @Component({
  selector: 'app-root',
  template: '<div [innerHtml]="title"></div>',
  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
 title = null;

 constructor(injector: Injector, domsanitizer: DomSanitizer){
   const customElement = createCustomElement(HelloComponent, {injector: 
   injector});

   //this feature is not provided by angular it is provided by javascript
   //this allows us to register custom web component
   customElements.define('my-tag', customElement);
   //instead of 'hello-world' i've used 'my-tag'    
   setTimeout(() => {
    //security mechanism is used to avoid cross site attacks
    this.title = domsanitizer.bypassSecurityTrustHtml('<my-tag message="This 
    is rendered dynamically">stack Overflow</my-tag>');     
    }, 1000);
   }
 }

在你的 HelloComponent 里面

 import { Component, OnInit, Input } from '@angular/core';

 @Component({
 selector: 'hello-world',
 template: `<div> hello component -- {{ message }}</div>`,
 styles: [`
  div {
    border: 1px solid black;
    background-color: red;
    padding: 1%;
   }
 `]
})
export class HelloComponent implements OnInit {
@Input() message : string;

constructor() { }

ngOnInit() {
}
}

现在它作为 native Web 组件加载。仍然只能在 Angular 项目中使用，但已经可用于像这样的动态内容。

我希望这能帮助你在本地运行你的代码