Din*_*ino 7 web-component angular
我有一个用 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 应用程序？
解决方案是将脚本导入 angular.json / .angular-cli.json
"scripts": [
"assets/elements.js"
]
然而，如果你这样保留它，你仍然会遇到最有可能导入多个 zone.js 的错误 - 一个来自你的 Angular 应用程序，另一个来自你的 Angular Web 组件应用程序。解决方案是禁用其中之一。从逻辑上讲，这将禁用来自 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， 则此方法将不起作用
| 归档时间： |
|
| 查看次数： |
3111 次 |
| 最近记录： |