1

我有一个微应用元素和一个正常工作的外壳应用程序。但是，我正在尝试构建没有公共库的微应用程序并从全局范围内引用它们。我按照以下教程使用共享库构建角度元素

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

  3. 文件 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"
   }
}

  4. 在 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 脚本不起作用，并且元素（微应用）无法引用全局数组

4

2 回答 2

0

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

  1. 仔细检查标签顺序，将 script.js 放在 main.js 之前（所以首先加载 angular）
  2. 在 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>
于 2020-08-21T15:33:13.333 回答
0

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

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

  1. 跑npm i @webcomponents/custom-elements --save
  2. 导入此脚本："scripts": [ "node_modules/@webcomponents/custom-elements/src/native-shim.js" ]
  3. 确保在 main.js 之前导入 polyfill 和 scripts.js
于 2021-09-01T08:34:18.847 回答