如何在另一个 Angular 应用程序中导入 Angular Web 组件
[英]How to import Angular Web Component in another Angular App
问题描述
I have one app built with Angular 5.2.
我有一个用 Angular 5.2 构建的应用程序。 I've also built a web component from Angular 8.0.我还从 Angular 8.0 构建了一个 Web 组件。 If I'm about to put that web component in a static html I would do it like this:如果我要将该 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>
Running this index.html file would have the web component built in. How ever if I apply the same approach to an Angular app (to include it in my Angular 5.2 app), it doesn't work.运行这个 index.html 文件将内置 web 组件。但是，如果我将相同的方法应用于 Angular 应用程序（将它包含在我的 Angular 5.2 应用程序中），它不起作用。
If I try importing straight from main index.html, I get the file not found error.如果我尝试直接从主 index.html 导入，则会出现文件未找到错误。 If I import it from angular.json scripts, I will get unexpected token error.如果我从 angular.json 脚本导入它，我会收到意外的令牌错误。
How exactly am I supposed to import an Angular web component into existing Angular app?我到底应该如何将 Angular Web 组件导入现有的 Angular 应用程序？
2 个解决方案
解决方案1
3 已采纳 2019-07-02 06:59:54
The solution was to import the script in angular.json / .angular-cli.json解决方案是在 angular.json / .angular-cli.json 中导入脚本
"scripts": [
"assets/elements.js"
]
How ever if you leave it like that, you will still get the errors most likely to multiple zone.js imports - One coming from your Angular App and other one from your Angular Web Components app.但是，如果您保持这种状态，您仍然会遇到最有可能在多个 zone.js 导入中出现的错误——一个来自您的 Angular 应用程序，另一个来自您的 Angular Web Components 应用程序。 The solution is to disable one of those.解决方案是禁用其中之一。 Logically it would be to disable the one coming from a web component - but it turned out that it doesn't work.从逻辑上讲，它会禁用来自 Web 组件的组件 - 但事实证明它不起作用。 You will have to remove the import of zone.js from your main Angular App, and keep it in your web component.您必须从主 Angular 应用程序中删除 zone.js 的导入，并将其保留在您的 Web 组件中。
Go to polyfills.ts and comment out or remove转到polyfills.ts并注释掉或删除
import 'zone.js/dist/zone';
Also don't forget to add CUSTOM_ELEMENTS_SCHEMA to your AppModule so that Angular knows you will be using outside components.另外不要忘记将CUSTOM_ELEMENTS_SCHEMA添加到您的 AppModule，以便 Angular 知道您将使用外部组件。
@NgModule({
declarations: [ ... ],
bootstrap: [ ... ],
imports: [ ... ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
Now you can use your web component anywhere in your application with现在你可以在你的应用程序的任何地方使用你的 web 组件
<custom-button></custom-button>
WARNING: This approach will not work if you are running different versions of webpack in those two applications警告：如果您在这两个应用程序中运行不同版本的 webpack ，这种方法将不起作用
解决方案2
0 2019-12-27 14:56:14
The solution that worked for me was to leave the polyfills.ts file in the main app unchanged and in the web component app :对我有用的解决方案是将 polyfills.ts 文件保留在主应用程序和 Web 组件应用程序中：
go to polyfills.ts file and comment out转到polyfills.ts文件并注释掉
import 'zone.js/dist/zone';
in the same file put a check to add the import only if the zone is not present在同一个文件中，仅当区域不存在时才检查添加导入
declare var require: any
if (!window['Zone']) {
require('zone.js/dist/zone'); // Included with Angular CLI.
}
If you continue to receive error about the zone in the main application maybe you concatenate the es5 polyfills file.如果您继续在主应用程序中收到有关区域的错误，则可能您连接了 es5 polyfills 文件。
When building the web component application in the dist folder you get five output files runtime.js , scripts.js , main.js , polyfills.js and polyfills-es5.js .当建立在dist网络组件应用程序文件夹你会得到五个输出文件runtime.js ， scripts.js ， main.js ， polyfills.js和polyfills-es5.js 。 Try concatenating the four first and together with the change above you should see your main application working fine with the web component.尝试先将这四个连接起来，再加上上面的更改，您应该会看到您的主应用程序与 Web 组件一起正常工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.