如何在另一个 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 应用程序中），它不起作用。

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

我到底应该如何将 Angular Web 组件导入现有的 Angular 应用程序？

Answer 1

解决方案是在 angular.json / .angular-cli.json 中导入脚本

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

但是，如果您保持这种状态，您仍然会遇到最有可能在多个 zone.js 导入中出现的错误——一个来自您的 Angular 应用程序，另一个来自您的 Angular Web Components 应用程序。 解决方案是禁用其中之一。 从逻辑上讲，它会禁用来自 Web 组件的组件 - 但事实证明它不起作用。 您必须从主 Angular 应用程序中删除 zone.js 的导入，并将其保留在您的 Web 组件中。

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

import 'zone.js/dist/zone';

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

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

现在你可以在你的应用程序的任何地方使用你的 web 组件

<custom-button></custom-button>

警告：如果您在这两个应用程序中运行不同版本的 webpack ，这种方法将不起作用

Answer 2

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

转到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网络组件应用程序文件夹你会得到五个输出文件runtime.js ， scripts.js ， main.js ， polyfills.js和polyfills-es5.js 。 尝试先将这四个连接起来，再加上上面的更改，您应该会看到您的主应用程序与 Web 组件一起正常工作。

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2019-07-02 06:59:54

解决方案2
0 2019-12-27 14:56:14

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2019-07-02 06:59:54

解决方案2 0 2019-12-27 14:56:14

解决方案1
3 已采纳 2019-07-02 06:59:54

解决方案2
0 2019-12-27 14:56:14