无法读取 Angular 8 自定义 Web 组件中未定义的 属性 'bind'

Question

我正在使用 angular 8 构建自定义 Web 组件。我注意到 Angular 8 没有 --single-build true，所以我使用了以下代码

(async function build() {
   const files = [
     "./dist/bundle/runtime-es2015.js",
     "./dist/bundle/polyfills-es2015.js",
     "./dist/bundle/styles-es2015.js",
     "./dist/bundle/scripts.js",
     "./dist/bundle/vendor-es2015.js",
     "./dist/bundle/main-es2015.js"
   ];

  await fs.ensureDir("elements");
  await concat(files, "elements/bundle.js");
})();

我已经排除了 ...-es5.js 个文件。当我删除 index.html 文件中的所有脚本标签并使用 bundle.js 时，以下代码有效，但是当我在另一个项目中导入自定义元素时，我从以下行得到 Uncaught TypeError: Cannot read property 'bind' of undefined ：

*/           var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
/******/     var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
/******/     jsonpArray.push = webpackJsonpCallback;

window["webpackJsonp"] returns 函数而不是数组导致 jsonpArray.push.bind(jsonpArray); 出错。遇到 ngx-build-plus，--single-bundle 有效但排除全局样式仅导入组件 scss，尝试在 --bundle-styles false 和 --keep-styles 中包含 ng build，没用。

当我连接所有文件时，如何解决以下错误 Uncaught TypeError: Cannot read property 'bind' of undefined？请注意，我说的是 angular webpack 而不是自定义 webpack。第二我怎样才能让 ngx-build-plus 渲染全局 scss ？

Answer 1

以下linkCannot read property 'bind' of undefined helped me a lot. To add jsonpFunction: "o3iv79tz90732goag" in angular 8 had to npm i @angular-builders/custom-webpack and create a webpack config file see below: see documentation为@angular-builders/custom-webpack

const webpack = require('webpack');

module.exports = {
  output: {
    jsonpFunction: 'wpJsonpBundle'
  }
};

然后将自定义 webpack 配置文件添加到 angular.json

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
           ....

在 ng build 之后，我使用问题中的函数连接文件，并可以在其他 angular 项目中使用自定义元素。