借鉴文献：/monstar-lab-bangladesh-engineering/angular-element-how-to-use-angular-components-in-react-vue-js-93757c92357b
Demo
子项目地址:/yc_996/angular-element
angular父项目地址：/yc_996/angular-elements-parents-ng
vue父项目地址：/yc_996/angular-elements-parents-vue
当前angular版本: v 9.1.2
第一步: 创建需要用在其他项目中的自定义组件
ng g m web-component 创建业务模块ng g c test -创建自定义组件import { BrowserModule } from '@angular/platform-browser';import { NgModule, DoBootstrap, ApplicationRef, Injector } from '@angular/core';import { createCustomElement } from "@angular/elements";import { AppComponent } from './ponent';import { TestComponent } from './web-component/test/ponent';import { WebComponentModule } from './web-component/web-component.module';@NgModule({declarations: [],imports: [BrowserModule,WebComponentModule],providers: [],bootstrap: [AppComponent]})export class AppModule {}
第二步: 在入口module中导出text component
由于该项目将只用于导出angular模块作为一个web组件，我们不需要通过app组件引导我们必须将可导出的test组件声明为entryComponents组件安装 @angular/elements 包npm i @angular/elements --save在ngDoBootstrap挂钩中，我们使用createCustomElement方法将test组件编译为标准的Web组件test组件依赖于TestService，由于它将在有angular生态系统之外使用，因此我们需要手动传递依赖项注入器，以便它可以加载依赖项import { BrowserModule } from '@angular/platform-browser';import { NgModule, DoBootstrap, ApplicationRef, Injector } from '@angular/core';import { createCustomElement } from "@angular/elements";import { AppComponent } from './ponent';import { TestComponent } from './web-component/test/ponent';import { WebComponentModule } from './web-component/web-component.module';@NgModule({declarations: [],imports: [BrowserModule,WebComponentModule],providers: [],entryComponents: [TestComponent]// bootstrap: [AppComponent]})export class AppModule implements DoBootstrap {constructor(public injector: Injector) {}public ngDoBootstrap(appRef: ApplicationRef): void {const el = createCustomElement(TestComponent, {injector: this.injector});customElements.define('app-test', el);}}
第三步: 将打包文件捆绑到一起
安装下concat：npm i concat --save在项目根目录创建文件夹/output现在，如果我们运行build，文件将在“dist”文件夹中生成。由于我们希望在另一个生态系统中更好地使用它，所以我们将文件合并为一个输出文件。所以，在package.json脚本部分中添加以下命令："scripts": {"concat-es5": "concat -o output/output-es5.js ./dist/child/runtime-es5.js ./dist/child/polyfills-es5.js ./dist/child/main-es5.js","concat-es": "concat -o output/output-es.js ./dist/child/runtime-es.js ./dist/child/polyfills-es.js ./dist/child/main-es.js","concat": "npm run concat-es5 && npm run concat-es","_build": "ng build --prod --aot --output-hashing=none && npm run concat",},
第四步: 在网络中引用
在/output下创建index.html安装下http-server：npm ihttp-server --save在package.json中添加脚本："sh":"npxhttp-server./output"<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Test Page</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="icon" type="image/x-icon" href="favicon.ico" /></head><body><app-test></app-test><script src="./output-es.js" type="module"></script><script src="./output-es.js" nomodule></script></body></html>
浏览器打开
