Angular 7: Uncaught ReferenceError: global is not defined when adding package

Question

I am building an Angular 7 app, and when i add a package npm install dragula --save and import this into the pollyfills.ts file i get this error:

Answer 1

Do you have custom webpack configuration for browser? Most probably declared in angular.json like so:

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

Then webpack.browser.config.js might look like so:

const dotenv = require("dotenv-webpack");
const webpackConfig = {
  node: { global: true, fs: "empty" }, // Fix: "Uncaught ReferenceError: global is not defined", and "Can't resolve 'fs'".
  output: {
    libraryTarget: "umd", // Fix: "Uncaught ReferenceError: exports is not defined".
  },
  plugins: [new dotenv()],
  target: "node",
};

module.exports = webpackConfig; // Export all custom Webpack configs.

Remove from its config target: "node" - it solves the problem.