Cannot read property 'bind' of undefined in Angular 8 custom web component

Question

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");
})();

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"] 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.

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 ?

Answer 1

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'
  }
};

Then add the custom webpack config file to angular.json

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

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