我有一个使用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 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,则此方法将不起作用
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句