无法读取Angular 8自定义Web组件中未定义的属性“绑定" [英] Cannot read property 'bind' of undefined in Angular 8 custom web component

问题描述

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

I am building a custom web component using angular 8. I have noticed that Angular 8 doesn't have --single-build true, so i used the following code

(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 时，以下代码有效，但是当我在另一个项目中导入自定义元素时，得到未捕获的TypeError:无法从以下行读取未定义的属性'bind':

I have excluded the ...-es5.js files. The following code works when i remove all scripts tags in the index.html file and use bundle.js but when i import the custom element in another project i get Uncaught TypeError: Cannot read property 'bind' of undefined from the following line :

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

window ["webpackJsonp"] 返回一个函数而不是数组，从而导致 jsonpArray.push.bind(jsonpArray); 错误.遇到 ngx-build-plus 时，-单捆可以工作，但不包括全局样式，仅导入组件scss，尝试包括-bundle-styles false 和-keep-styles 在 ng构建中，则无效.

window["webpackJsonp"] returns a function instead of an array causing jsonpArray.push.bind(jsonpArray); to error. Came across ngx-build-plus, --single-bundle works but excludes the global styling only imports component scss, tried including --bundle-styles false and --keep-styles in the ng build, it didn't work.

如何解决以下错误未捕获的TypeError:当我合并所有文件时，无法读取未定义的属性'bind'?请注意，我使用的是有角度的webpack，而不是自定义的webpack.2nd如何使 ngx-build-plus 呈现全局scss?

How can i solve the following error Uncaught TypeError: Cannot read property 'bind' of undefined when i concat all files ? Take note i am sing angular webpack not custom webpack. 2nd how can i make ngx-build-plus render global scss ?

推荐答案

以下链接无法阅读未定义的属性绑定" 对我有很大帮助.要在angular 8中添加 jsonpFunction:"o3iv79tz90732goag" ，必须 npm i @ angular-builders/custom-webpack 并创建一个webpack配置文件，请参见下文:请参见文档 @ angular-builders/custom-webpack >

The following link Cannot 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 for @angular-builders/custom-webpack

const webpack = require('webpack');

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

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

Then add the custom webpack config file to angular.json

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

在ng构建之后，我随后使用问题中的函数将文件连接起来，并可以在其他有角项目中使用自定义元素.

After ng build, i then concatenate the files using the function in the question and can use the custom element in other angular projects.

这篇关于无法读取Angular 8自定义Web组件中未定义的属性“绑定"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！