在 Angular 微应用元素之间共享库答案

【问题标题】：Sharing libraries among angular micro app elements在 Angular 微应用元素之间共享库
【发布时间】：2020-09-07 04:02:39
【问题描述】：

我有一个微应用元素和一个正常工作的 shell 应用。但是，我正在尝试构建没有公共库的微应用程序并从全局范围内引用它们。我跟着下面的教程Building angular elements with sharing libraries

ng g ngx-build-plus:externals
npm run build:externals (ng serve --extra-webpack-config webpack.externals.js --output-hashing none --single-bundle)

文件 webpack.externals.js 定义了以下外部文件

module.exports = {
"externals": {
    "rxjs": "rxjs",
    "@angular/core": "ng.core",
    "@angular/common": "ng.common",
    "@angular/common/http": "ng.common.http",
    "@angular/platform-browser": "ng.platformBrowser",
    "@angular/platform-browser-dynamic": "ng.platformBrowserDynamic",
    "@angular/compiler": "ng.compiler",
    "@angular/elements": "ng.elements",

    // Uncomment and add to scripts in angular.json if needed
    // "@angular/router": "ng.router",
    // "@angular/forms": "ng.forms"
   }
}

在 angular.json 中有以下脚本

"scripts": [
              "node_modules/rxjs/bundles/rxjs.umd.js",
              "node_modules/@angular/core/bundles/core.umd.js",
              "node_modules/@angular/common/bundles/common.umd.js",
              "node_modules/@angular/common/bundles/common-http.umd.js",
              "node_modules/@angular/compiler/bundles/compiler.umd.js",
              "node_modules/@angular/elements/bundles/elements.umd.js",
              "node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
              "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"
            ]

但是现在，该元素没有加载到 shell 应用程序中。它说 "Uncaught ReferenceError: ng is not defined at Object.@angular/core"。我对角度很陌生，我在这里错过了一步吗？看起来 angular.json 脚本不起作用，并且元素（微应用）无法引用全局数组

【问题讨论】：

你解决了这个问题吗？怎么样？
正如@ExploreEv 所回答的那样，您需要拥有一个包含所有常用库的应用程序。在加载微应用的 main.js 之前，在 index.js 中使用该 scripts.js

标签： angular angular-elements webpack-externals ngx-build-plus

【解决方案1】：

我遇到了同样的错误，但是 ExploreEv 的 2 个脚本不知何故没有解决它。在 Manfred Steyer 的帮助下，它终于奏效了：

https://github.com/manfredsteyer/ngx-build-plus/issues/5

运行npm i @webcomponents/custom-elements --save
导入此脚本："scripts": [ "node_modules/@webcomponents/custom-elements/src/native-shim.js" ]
确保在 main.js 之前导入 polyfill 和 scripts.js

【讨论】：

【解决方案2】：

我遇到了和你一样的问题，我正在尝试使用 ng-build-plus 将 angular 元素嵌入到 angular 应用程序中，这就是我解决它的方法：

仔细检查标签顺序，将 script.js 放在 main.js 之前（所以先加载 angular）
在script.js上面添加下面两个脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"></script>

【讨论】：