Angular 如何在规则角度组件和角度元素之间共享代码？

假设我将使用nx在mono repo中的不同站点之间共享库。 我有两个网站：

• 站点1：Angular应用程序
• 站点2：静态站点

站点1具有helloWorld角度组件。 在Site2上，我想使用helloWorld组件，但作为由Angle元素创建的web组件。所有角度组件和元素应存储在共享的外部nx库中

---

有没有办法在规则角度组件和角度元素之间共享代码？或者，将常规组件嵌套在元素中？

只需几个步骤就可以找到可能的解决方案

1.生成库 第一步是生成要存储共享自定义元素的nx库。

nx g lib自定义元素

在

angular.json

中添加此库的构建步骤，如下所示：

        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/libs/custom-elements",
            "index": "libs/custom-elements/src/lib/index.html",
            "main": "libs/custom-elements/src/lib/main.ts",
            "tsConfig": "libs/custom-elements/tsconfig.lib.json",
            "aot": true,
            "assets": [],
            "styles": [],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [],
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },

那里的主要部分是

“builder”：“@angular devkit/build angular:browser”

，因为我们稍后将使用此库生成的文件。 另外，不要忘记添加空的

index.html

文件

2.将角度组件标记为自定义元素 首先，添加角度元素

npm安装@angular/elements

然后使用

createCustomElement

标记要共享的组件：

@NgModule({
   imports: [BrowserModule],
   entryComponents: [SomeComponent],
})
export class SharedComponentsModule {
   constructor(readonly injector: Injector) {
       const ngElement = createCustomElement(SomeComponent, {
           injector,
       });

       customElements.define('some-component', ngElement);
   }

   ngDoBootstrap() {}
}

3.构建库并向静态页面添加必要的脚本 运行

nx构建自定义元素

。您将获得dist/libs/custom元素中的所有文件。您现在可以将它们添加到任何页面并使用自定义元素

工作示例 我在这里创建了一个工作示例

如何运行angular应用程序：

npm start

如何运行静态应用程序：

npm运行应用程序2:service

附加阅读

---

通过几个步骤就可以找到可能的解决方案

1.生成库 第一步是生成要存储共享自定义元素的nx库。

nx g lib自定义元素

在

angular.json

中添加此库的构建步骤，如下所示：

        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/libs/custom-elements",
            "index": "libs/custom-elements/src/lib/index.html",
            "main": "libs/custom-elements/src/lib/main.ts",
            "tsConfig": "libs/custom-elements/tsconfig.lib.json",
            "aot": true,
            "assets": [],
            "styles": [],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [],
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },

那里的主要部分是

“builder”：“@angular devkit/build angular:browser”

，因为我们稍后将使用此库生成的文件。 另外，不要忘记添加空的

index.html

文件

2.将角度组件标记为自定义元素 首先，添加角度元素

npm安装@angular/elements

然后使用

createCustomElement

标记要共享的组件：

@NgModule({
   imports: [BrowserModule],
   entryComponents: [SomeComponent],
})
export class SharedComponentsModule {
   constructor(readonly injector: Injector) {
       const ngElement = createCustomElement(SomeComponent, {
           injector,
       });

       customElements.define('some-component', ngElement);
   }

   ngDoBootstrap() {}
}

3.构建库并向静态页面添加必要的脚本 运行

nx构建自定义元素

。您将获得dist/libs/custom元素中的所有文件。您现在可以将它们添加到任何页面并使用自定义元素

工作示例 我在这里创建了一个工作示例

如何运行angular应用程序：

npm start

如何运行静态应用程序：

npm运行应用程序2:service

附加阅读

有没有办法在规则角度分量和 角元素

是的，这就是我们使用库的原因。库不仅仅是在Nx中共享代码的一种方式。它们对于使用定义良好的公共API将代码分解成小单元也很有用。NX建议使用一个新的

根据，Angular元素是打包为自定义元素的Angular组件（也称为Web组件），因此您需要的是包含用于在Nx工作区内管理Web组件应用程序和库的生成器。你可能需要里面的有用说明来达到你的目的

有没有办法将常规组件嵌套在元素中

是的，因为Angular允许我们将可重用逻辑放入单独的单元中

有没有办法在规则角度分量和 角元素

是的，这就是我们使用库的原因。库不仅仅是在Nx中共享代码的一种方式。它们对于使用定义良好的公共API将代码分解成小单元也很有用。NX建议使用一个新的

根据，Angular元素是打包为自定义元素的Angular组件（也称为Web组件），因此您需要的是包含用于在Nx工作区内管理Web组件应用程序和库的生成器。你可能需要里面的有用说明来达到你的目的

有没有办法将常规组件嵌套在元素中

---

是的，因为Angular允许我们将可重用逻辑放在单独的单元中。

也许您可以添加更多关于您希望在两个单元之间共享哪些类型数据的详细信息？这两个组件是否在同一台服务器上并包含在同一个Angle项目中？谢谢@Rick。2之间没有共享数据。helloWorld组件只输出“helloWorld！”。站点2没有Angular应用程序。它应该只使用Angular元素。你可以尝试将常见的共享组件转换为它们自己的库，元素和常规Angular应用程序都可以从中导入它们所需的内容。也许你可以添加更多关于希望在这两个应用程序之间共享哪种数据的详细信息？这两个组件是否在同一台服务器上并包含在同一个Angle项目中？谢谢@Rick。2之间没有共享数据。helloWorld组件只输出“helloWorld！”。站点2没有Angular应用程序。它应该只使用Angular元素。你可以尝试将公共共享组件转换为它们自己的库，元素和常规Angular应用程序都可以从库中导入它们需要的内容。