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 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';

也不要忘记在AppModule中添加 CUSTOM_ELEMENTS_SCHEMA ，以便Angular知道您将使用外部组件。

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

现在，您可以在应用程序中的任何位置使用Web组件

<custom-button></custom-button>

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

Answer 2

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

转到 polyfills.ts 文件并注释掉

123.456,78

在同一文件中进行检查，仅在不存在区域的情况下才添加导入

import 'zone.js/dist/zone';

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

在dist文件夹中构建Web组件应用程序时，您将获得五个输出文件declare var require: any if (!window['Zone']) { require('zone.js/dist/zone'); // Included with Angular CLI. }，runtime.js，scripts.js，main.js和polyfills.js。尝试先将这四个连接起来，再加上上面的更改，您应该会看到您的主应用程序与Web组件配合正常。

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

2 个答案: