angular - 从现有项目构建 Angular 元素

Question

我们有一个现有的 Angular 8 项目，其中包括一堆通用组件(如自定义 datepickers、数字输入...)。该项目本身是一个标准的 Angular 应用程序。

我们想提取其中一些组件作为 Angular 元素，它们可以用于其他 Angular 应用程序，甚至其他与 Angular 无关的项目。

是否可以通过仅将特定于单个 Angular 元素的代码包含在生成的 JavaScript 文件中的方式来构建项目？

我需要的是这样的: ng build --element myDatePicker

这应该为 myDatePicker-Element 生成所有 JavaScript 文件，只包含所有需要的依赖项，但没有项目中的任何其他代码(如其他 组件、模块、...)。

当我使用 ng build 时，整个应用仍应正常构建。

Answer 1

我建议你看看Angular Elements ，更具体地说 createCustomElement .这将帮助您准确地实现您的需求。

我可以给你一个简短的指导，告诉你你可以做什么。

My Github Repo for example

1) 首先是安装@angular/elements

npm i @angular/elements --save

2) 此步骤包括修改您的 app.module.ts .如果您只想构建一组选定的组件(自定义日期选择器、数字输入等...)，您将必须删除 bootstrap: [ ]片刻并将其替换为 entryComponents: [ ] .在 entryComponents 中，您将放置要构建的自定义组件。

entryComponents: [MyCustomDatePickerComponent, CustomButtonComponent]

3) 现在是告诉 Angular 引导您的自定义组件的时候了。您还必须为自定义组件定义选择器。您将从注入(inject)它们的任何其他应用程序中使用该选择器调用它们。例如:<my-button-element></my-button-element>

export class AppModule {

  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(CustomButtonComponent,
      { injector: this.injector });
    customElements.define('my-button-element', el);
    const el2 = createCustomElement(MyCustomDatePickerComponent,
      { injector: this.injector });
    customElements.define('custom-date-picker', el2);
  }
}

4) 构建组件 - 如果您运行 ng build --prod你会得到多个文件。我们希望将这些文件合并为一个文件，以便更轻松地使用和注入(inject)我们构建的自定义元素。有两个包可以帮助我们做到这一点。 npm install --save-dev concat fs-extra

创建一个 elements-build.js在root您的应用程序并粘贴它。 (它将构建输出合并到一个 .js 和 .css 文件中，并将它们放在 root/elements 文件夹中。

const concat = require('concat');
const fs = require('fs-extra');

(async function build() {
  // Instead of /CustomElements/ put your project name - just check a dist folder to see how its formatted and make it that way
  const files = [
    './dist/CustomElements/runtime-es2015.js',
    './dist/CustomElements/polyfills-es2015.js',
    './dist/CustomElements/main-es2015.js'
  ];

  await fs.ensureDir('elements');
  await concat(files, 'elements/myCustomElements.js');
  await fs.copyFile(
    './dist/CustomElements/styles.css',
    'elements/styles.css'
  );
})();

5) 在你的 package.json 添加

"build:elements": "ng build --prod --output-hashing none && node elements-build.js",

6) 就是这样。您已经构建了自定义元素，并且可以在其他 Angular 应用程序甚至非 Angular 应用程序中的任何地方重用它们。您唯一需要做的就是导入 .js和 .css你刚刚创建。您甚至可以像往常一样使用 Input() 和 Output()。

<custom-date-picker dateTitle="My Date Title"></custom-date-picker>

注意: 如果你决定将它导入到另一个 Angular 应用程序，你可能会遇到 zone.js 的问题。因为它将被导入两次。解决方案是只导入一次(无论是从核心应用程序还是自定义元素)。