如何在另一个 Angular 应用程序中导入 Angular Web 组件

Question

我有一个使用 Angular 5.2 构建的应用程序。我还从 Angular 8.0 构建了一个 Web 组件。如果我要将该 Web 组件放在静态 html 中，我会这样做：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom Button Test Page</title>
  <!-- This is the Web Component import -->
  <script src="elements.js"></script>
</head>

<body>
<custom-button></custom-button>
</body>

</html>

运行这个 index.html 文件将内置 Web 组件。如果我将相同的方法应用于 Angular 应用程序（将其包含在我的 Angular 5.2 应用程序），它不起作用。

如果我尝试直接从 main index.html 导入，我会收到找不到文件的错误。如果我从 angular.json 脚本导入它，我将收到意外的令牌错误。

我应该如何将 Angular 网络组件导入现有的 Angular 应用程序？

Answer 1

解决方案是在 angular.json / .angular-cli.json

中导入脚本

"scripts": [
   "assets/elements.js"
]

如果你这样离开它，你仍然会得到最有可能多次 zone.js 导入的错误 - 一个来自你的 Angular 应用程序，另一个来自你的 Angular ] Web 组件应用程序。解决方案是禁用其中之一。从逻辑上讲，这将是禁用来自 Web 组件的组件 - 但事实证明它不起作用。您必须从主 Angular 应用程序中删除 zone.js 的导入，并将其保留在您的网络组件中。

转到 polyfills.ts 并注释掉或删除

import 'zone.js/dist/zone';

另外不要忘记将 CUSTOM_ELEMENTS_SCHEMA 添加到您的 AppModule 以便 Angular 知道您将使用外部组件。

@NgModule({
    declarations: [ ... ],
    bootstrap:    [ ... ],
    imports: [ ... ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

现在您可以通过

在您的应用程序的任何地方使用您的网络组件

<custom-button></custom-button>

警告： 如果您在这两个应用程序中运行 不同版本的 webpack

，则此方法将不起作用

Answer 2

对我有用的解决方案是保持主应用程序和 Web 组件应用程序中的 polyfills.ts 文件不变：

转到polyfills.ts文件并注释掉

import 'zone.js/dist/zone';

在同一文件中勾选仅当区域不存在时才添加导入

declare var require: any
if (!window['Zone']) {
    require('zone.js/dist/zone'); // Included with Angular CLI.
}

如果您继续在主应用程序中收到有关区域的错误，可能是您连接了 es5 polyfills 文件。

在 dist 文件夹中构建 Web 组件应用程序时，您会得到五个输出文件 runtime.js、scripts.js、main.js、polyfills.js 和 polyfills-es5.js。首先尝试连接这四个，然后结合上面的更改，您应该会看到您的主应用程序与 Web 组件一起正常工作。

如何在另一个 Angular 应用程序中导入 Angular Web 组件

How to import Angular Web Component in another Angular App

web-component

angular