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"]返回一个函数，而不是导致jsonpArray.push.bind(jsonpArray);错误的数组。遇到 ngx-build-plus 时，--single-bundle可以工作，但不包括仅全局导入样式的import组件scs，尝试将--bundle-styles false和--keep-styles包括在{{1}中}，它不起作用。

合并所有文件时，如何解决以下错误ng build？请注意，我使用的是有角度的webpack，而不是自定义的webpack。第二如何使Uncaught TypeError: Cannot read property 'bind' of undefined呈现全局scss？

Answer 1

以下链接Cannot read property 'bind' of undefined对我有很大帮助。要在角度8中添加jsonpFunction: "o3iv79tz90732goag"，必须添加到npm i @angular-builders/custom-webpack并创建一个webpack配置文件，请参见下文：有关@ angular-builders / custom-webpack的信息，请参见documentation

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之后，我使用问题中的函数将文件连接起来，并可以在其他有角项目中使用自定义元素。

无法读取Angular 8自定义Web组件中未定义的属性“绑定”

1 个答案: