如何通过Webpack或Angular CLI将Angular元素编译为Web组件？ [英] How to Compile Angular Element Into Web Component w/ Webpack or Angular CLI?

问题描述

我使用Pascal Precht的教程，通过Angular构建了一个简单的Web组件，您可以请参见 HERE 。

I built a simple Web Component via Angular using Pascal Precht's tutorial, which you can see working HERE. It auto-magically compiles in the on Stackblitz in the link, but not locally.

我的最终目标是将生成的Web组件的代码包含在链接中，并自动在链接中的Stackblitz中进行编译。 最终，我将其上传到某处，并通过一个< script> 标签将其拉入，就像普通的raw-html / javascript Web一样组件。我认为这个问题说明了一切，但您可以阅读以下详细信息：

My end goal is to have the code for the resulting Web Component in a separate file locally. Eventually, I will upload it somewhere and pull it in via a single <script> tag, just like normal raw-html/javascript Web Components. I think the question speaks for itself, but you can read the details below if you would like:

---

详细信息 ：

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

To summarize my code in the link above, I have a very basic component:

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

以下是上述模块的说明：

Here is an explanation of the module above:

1. 将我的组件添加到 entryComponents 数组中，这样它不会被角树取出-振动筛（由于无法在应用程序启动时到达：
   entryComponents：[HelloComponent]



2. 运行我的组件 createCustomElement 函数，以便可以将其用作常规html Web组件：

1. Add my component to the entryComponents array so it's not taken out by the angular tree-shaker (since it's not reachable on app boot: entryComponents: [HelloComponent]

2. Run my component through the createCustomElement function so that I can use it as a regular html Web Component:

const HelloElement = createCustomElement（HelloComponent，{
注射器：this.injector
}）;

const HelloElement = createCustomElement(HelloComponent, { injector: this.injector });

最后，我要求Angular在 main.ts 中编译该组件：

Finally, I ask Angular to compile this component in main.ts:

platformBrowserDynamic（） .bootstrapModule（AppModule）;

---

这里是我完整阅读/观看的内容（还有许多其他链接-其中大多数都已过时，例如原始的Angular Elements简介）：

---

Here is the stuff I read / watched fully (among dozens of other links - most of which are dated, like the original Angular Elements intro):

TomekSułkowski从头开始编写的Web组件（他从不单独编译）< br>
带有CLI的Web组件 （相同的问题）

Academind的Web Components （再次，这个人还在Angular应用程序中使用它们）

Web Components from Scratch by Tomek Sułkowski (He never compiles it separately)
Web Components with CLI (Same problem)
Web Components by Academind (Yet again, this guy also uses them within Angular apps)

谢谢您的帮助。

推荐答案

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
并添加 package.json中的 @ webcomponents / custom-elements： ^ 1.0.8 。
之后，运行 npm install &
以及您需要在polyfills.ts的行下面取消注释。

npm install --save @angular/elements and add "@webcomponents/custom-elements" : "^1.0.8" in package.json. After that run npm install & along with that you need to un-comment below lines from polyfills.ts

这会添加一个polyfill，这是自定义元素起作用所必需的。

This adds a polyfill which is required for custom elements to work.

import'@ webcomponents / custom-elements / custom-elements.min';
导入‘@ webcomponents / custom-elements / src / native-shim’；


< my-tag message =这是动态呈现的>堆栈溢出< / my-tag>

Angular不会编译以上代码，但是angular元素通过允许采用我们的angular分量和将其放入完全封装的自引导HTML元素中，您可以按照以下方式将其转储到您的angular应用中，例如，并且仍然可以使用。

Angular doesn't compile this above code, but angular elements fixes this issue by allowing to take our angular component and put it into totally encapsulated self bootstrapping HTML element which you can dump into your angular app in this following way for e.g and which will still work.

在AppComponent.ts文件中

In AppComponent.ts file

 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() {
}
}

现在，它已作为本机Web组件加载。仍然仅可用于有角度的项目，但已可用于像这样的动态内容。

Now this is loaded as native web component.Still only usable in angular projects, but already usable for dyanamic content like this.

我希望这会帮助您在本地运行代码

I hope this will help you to run your code locally

这篇关于如何通过Webpack或Angular CLI将Angular元素编译为Web组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！