angular Elements自定义组件使用（一） 可用于任意框架(vue,react,h5...)

借鉴文献：https://medium.com/monstar-lab-bangladesh-engineering/angular-element-how-to-use-angular-components-in-react-vue-js-93757c92357b

Demo地址: https://gitee.com/yc_996/angular-element

当前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 './app.component';
import { TestComponent } from './web-component/test/test.component';
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 './app.component';
import { TestComponent } from './web-component/test/test.component';
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-es2015": "concat -o output/output-es2015.js ./dist/child/runtime-es2015.js ./dist/child/polyfills-es2015.js ./dist/child/main-es2015.js",
    "concat": "npm run concat-es5 && npm run concat-es2015",
    "_build": "ng build --prod --aot --output-hashing=none && npm run concat",
  },

 第四步: 在网络中引用

• 在/output下创建index.html
• 安装下http-server：npm i http-server --save
• 在package.json中添加脚本："sh": "npx http-server ./output"

• 浏览器打开

 

讨论qq: 745585125

未完待续...