未捕获的类型错误：Class 扩展值未定义不是构造函数或 null

Question

So I migrated a project from AngularJS 1.5 to Angular 8, everything was fine until I ran the serve (.Net Core serv) and got an error about circular dependencies. So I started to search a solution but the file concerned by the error are generate so I really don't know what to do.

Uncaught TypeError: Class extends value undefined is not a constructor or null at Object../node_modules/streamroller/lib/RollingFileWriteStream.js (RollingFileWriteStream.js:64) at webpack_require (bootstrap:79) at Object../node_modules/streamroller/lib/index.js (index.js:2) at webpack_require (bootstrap:79) at Object../node_modules/ts-log-debug/lib/appenders/components/FileAppender.js (FileAppender.js:12) at webpack_require (bootstrap:79) at Object../node_modules/ts-log-debug/lib/appenders/index.js (index.js:73) at webpack_require (bootstrap:79) at Object../node_modules/ts-log-debug/lib/index.js (index.js:23) at webpack_require (bootstrap:79)

As you can see the error come from the file RollingFileWriteStream.js, so I'm kind of lost (I'm a junior with like 10 weeks of experience). I have absolutely no idea of where does the error come from so I put some code here, hope that could help. Here is my package.json

{
  "name": "ofs",
  "version": "1.0.0",
  "description": "ofs v2",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false,
    "zlib": false
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "7.5.5",
    "@babel/core": "^7.7.0",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@types/node": "^12.12.1",
    "angular-gettext-cli": "^1.2.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-angularjs-annotate": "^0.10.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-destructuring": "^6.19.0",
    "babel-plugin-transform-object-rest-spread": "^6.20.2",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "css-loader": "^3.2.0",
    "exports-loader": "^0.7.0",
    "extract-loader": "^3.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^4.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.0.0-beta.2",
    "jest": "^24.9.0",
    "jest-cli": "^24.9.0",
    "js-string-escape": "^1.0.1",
    "ng-annotate-loader": "^0.6.1",
    "ng-annotate-webpack-plugin": "^0.3.0",
    "ngtemplate-loader": "^2.0.1",
    "node-sass": "^4.13.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^3.1.0",
    "sass-loader": "^7.1.0",
    "script-loader": "^0.7.2",
    "style-loader": "^1.0.0",
    "terser-webpack-plugin": "^2.2.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.1.2",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "@angular-devkit/build-angular": "^0.803.15",
    "@angular/cli": "^8.3.15",
    "@angular/compiler": "^8.2.12",
    "@angular/compiler-cli": "^8.2.12",
    "@angular/core": "^8.2.12",
    "@types/jquery": "^3.3.31",
    "acorn": "^7.1.0",
    "angular": "^1.6.3",
    "angular-animate": "^1.6.4",
    "angular-aria": "^1.6.4",
    "angular-breadcrumb": "0.5.0",
    "angular-file-md5": "^0.1.0",
    "angular-gettext": "^2.3.10",
    "angular-jwt": "0.1.11",
    "angular-loading-bar": "^0.9.0",
    "angular-local-storage": "0.7.1",
    "angular-material": "^1.1.4",
    "angular-messages": "^1.6.2",
    "angular-sanitize": "^1.6.3",
    "angular-toastr": "2.1.1",
    "angular-tree-control": "^0.2.28",
    "angular-ui-grid": "^4.8.3",
    "angular-ui-layout": "^1.4.3",
    "angular-ui-router": "1.0.23",
    "babel": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.3.1",
    "constants": "0.0.2",
    "crypto-js": "3.1.9-1",
    "font-awesome": "4.7.0",
    "fs": "0.0.1-security",
    "highcharts": "^7.2.0",
    "jquery": "^3.4.1",
    "mini-css-extract-plugin": "^0.8.0",
    "moment": "^2.18.1",
    "ng-device-detector": "^5.1.4",
    "ng-file-upload": "^12.2.13",
    "ngx-build-plus": "^8.1.5",
    "os": "^0.1.1",
    "path": "^0.12.7",
    "process": "^0.11.10",
    "ramda": "0.26.1",
    "rxjs": "^6.5.3",
    "sass": "^1.23.3",
    "source-map-support": "^0.5.13",
    "stream": "0.0.2",
    "ts-log-debug": "^5.1.1",
    "ui-select": "^0.19.6",
    "zlib": "^1.0.5",
    "zone.js": "^0.10.2"
  }
}

Here is my Angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Osiatis.OFS.WebAppV2": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "skipTests": true
        },
        "@schematics/angular:class": {
          "skipTests": true
        },
        "@schematics/angular:directive": {
          "skipTests": true
        },
        "@schematics/angular:guard": {
          "skipTests": true
        },
        "@schematics/angular:module": {
          "skipTests": true
        },
        "@schematics/angular:pipe": {
          "skipTests": true
        },
        "@schematics/angular:service": {
          "skipTests": true
        }
      },
      "root": "",
      "sourceRoot": "app",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "./wwwroot",
            "index": "app/index.html",
            "main": "app/index.ts",
            "polyfills": "app/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "app/assets"
            ],
            "styles": [
                "app/common/app.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "app/environments/environment.ts",
                  "with": "app/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Osiatis.OFS.WebAppV2:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Osiatis.OFS.WebAppV2:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Osiatis.OFS.WebAppV2:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "app/test.ts",
            "polyfills": "app/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "app/favicon.ico",
              "app/assets"
            ],
            "styles": [
              "app/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Osiatis.OFS.WebAppV2:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "Osiatis.OFS.WebAppV2:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "Osiatis.OFS.WebAppV2"
}

And there is my webpack.partial.js (I'm using ngx-build-plus)

const webpack = require('webpack');
const CleanPlugin = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './app/assets/index.html',
            inject: 'head'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css',
            chunkFilename: '[name].[hash].css'
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            angular: 'angular',
            moment: 'moment',
            polyfill: 'babel-polyfill',
            'window.jQuery': 'jquery'
        }),
        new CleanPlugin([root]),
        new CopyPlugin([
            {
                from: path.join(__dirname, 'app/assets/scripts/i18n/translate.ts'),
                to: 'i18n/'
            },
            {
                from: path.join(__dirname, 'app/assets/img/**/*'),
                to: 'img/',
                flatten: true
            },
            {
                from: path.join(__dirname, 'node_modules/font-awesome/fonts/*'),
                to: 'fonts/',
                flatten: true
            },
            {
                from: path.join(__dirname, 'node_modules/bootstrap/fonts/*'),
                to: 'fonts/',
                flatten: true
            },
            {
                from: path.join(__dirname, 'node_modules/angular-ui-grid/ui-grid.eot'),
                to: '',
                flatten: true
            },
            {
                from: path.join(__dirname, 'node_modules/angular-ui-grid/ui-grid.svg'),
                to: '',
                flatten: true
            },
            {
                from: path.join(__dirname, 'node_modules/angular-ui-grid/ui-grid.ttf'),
                to: '',
                flatten: true
            },
            {
                from: path.join(__dirname, 'node_modules/angular-ui-grid/ui-grid.woff'),
                to: '',
                flatten: true
            },
            {
                from: path.join(__dirname, 'app/assets/fonts/*'),
                to: 'fonts/',
                flatten: true
            },
        ])
    ],
    resolve: {
        extensions: ['.js'],
        modules: [
            path.resolve(__dirname, 'node_modules')
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'initial',
            name: false,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    filename: '[name].[hash].js',
                    chunks: 'all'
                }
            },
        }
    },
    watchOptions: {
        ignored: /node_modules/
    },
    mode: 'production',
    optimization: {
        minimize: true,
        splitChunks: {
            chunks: 'initial',
            name: false,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    filename: '[name].[hash].js',
                    chunks: 'all',
                    maxSize: 3000000,
                }
            },
        },
        minimizer: [
            new UglifyJsPlugin ({
                uglifyOptions: {
                    warnings: false,
                    sourceMap: false,
                    mangle: true
                }
            }),

            new TerserPlugin(),

            new OptimizeCSSAssetsPlugin({}),
        ]
    }
}

hope you could help me PS: apologize for my english

Answer 1

I resolved my problem, it was some plugins that I forgot to add in my webpack.partial.js so I add them and it worked !