如何在另一個 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