Scripts cannot be added to webpack.config.js using Latest version of Angular CLI

[andreidiaconescu]

Hello,

I tried to add boostrap 3 library to my project, that uses this starter project.
Steps done:

1. npm install bootstrap@3 jquery --save
2. edit webpack.config.js
   .......................................................................
   //add all external css to be added in our index.html--> like as if it's .angular-cli.json
   const styles = [
   "./src/styles.scss",
   "./node_modules/bootstrap/dist/css/bootstrap.min.css"
   ];

//we add all our external scripts we want to load externally, like inserting in our index.html --> like as if it's .angular-cli.json
const scripts = [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
];
...................................................................

3. run npm start
   i get the error:

TypeError: InsertConcatAssetsWebpackPlugin is not a constructor
at getPlugins (/home/andrei/Projects/var/electron/angular-electron-maximegris/webpack.config.js:101:18)
at Object. (/home/andrei/Projects/var/electron/angular-electron-maximegris/webpack.config.js:536:14)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at requireConfig (/home/andrei/Projects/var/electron/angular-electron-maximegris/node_modules/webpack/bin/convert-argv.js:97:18)
at /home/andrei/Projects/var/electron/angular-electron-maximegris/node_modules/webpack/bin/convert-argv.js:104:17
at Array.forEach ()
at module.exports (/home/andrei/Projects/var/electron/angular-electron-maximegris/node_modules/webpack/bin/convert-argv.js:102:15)
at yargs.parse (/home/andrei/Projects/var/electron/angular-electron-maximegris/node_modules/webpack/bin/webpack.js:171:41)
at Object.Yargs.self.parse (/home/andrei/Projects/var/electron/angular-electron-maximegris/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
at Object. (/home/andrei/Projects/var/electron/angular-electron-maximegris/node_modules/webpack/bin/webpack.js:152:7)

A bit of investigation i did that may help:

• please check commit angular/angular-cli@8cea8ff#diff-814e1e541d11a4d19bc04e52faf2a683
  where you can see that the webpack plugin InsertConcatAssetsWebpackPlugin was removed from Angular CLI.

Can you please advise on how to add Boostrap 3 to the project ?
Thank you !

[mo2menelzeiny]

@andreidiaconescu yeah it's because the new cli version doesn't have this class, I just resolved this by replacing the InsertConcatAssetsWebpackPlugin with the new ScriptsWebpackPlugin.

const {BaseHrefWebpackPlugin, NamedLazyChunksWebpackPlugin, ScriptsWebpackPlugin} = require('@angular/cli/plugins/webpack');

now in the code replace

plugins.push(new InsertConcatAssetsWebpackPlugin([
      "scripts"
    ]));

with the new imported ScriptsWebpackPlugin implementation

plugins.push(new ScriptsWebpackPlugin({
      name: "scripts",
      sourceMap: true,
      scripts: scripts
    }));

[mo2menelzeiny]

Duplicate of #118

[maximegris]

Thanks @mo2menelzeiny for the PR 👍