首页 > 解决方案 > main.js:1 Uncaught TypeError:Cannot read property 'prototype' of undefined

问题描述

我已将我的项目从 Angular 8 升级到 Angular 11。它在 DEV 模式下运行良好,但如果我在 Prod 模式下运行它或构建它并将其部署到 Web 服务器。在浏览器中启动网站时出现以下错误:

main.js:1 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at main.js:1
    at main.js:1
    at Module.zUnb (main.js:1)
    at l (runtime.js:1)
    at Object.0 (main.js:1)
    at l (runtime.js:1)
    at t (runtime.js:1)
    at Array.r [as push] (runtime.js:1)
    at main.js:1

我猜,当它使用 webpack 将代码编译成包时出现了问题。升级前的 package.json:

{
  "name": "xxxxxx",
  "version": "1.1.1",
  "license": "UNLICENSED",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start-ssl": "ng serve --proxy-config proxy.conf.json --ssl true",
    "start-nossl": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "build-prod": "node --max_old_space_size=2000000 ./node_modules/@angular/cli/bin/ng build --prod --base-href /caui/",
    "build-prod19": "node --max_old_space_size=2000000 ./node_modules/@angular/cli/bin/ng build --prod --base-href /caui19/",
    "build-test": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng test --watch=false -cc",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "8.2.0",
    "@angular/common": "8.2.0",
    "@angular/compiler": "8.2.0",
    "@angular/compiler-cli": "8.2.0",
    "@angular/core": "8.2.0",
    "@angular/forms": "8.2.0",
    "@angular/platform-browser": "8.2.0",
    "@angular/platform-browser-dynamic": "8.2.0",
    "@angular/platform-server": "8.2.0",
    "@angular/router": "8.2.0",
    "@angular/cdk": "8.1.2",
    "@ng-bootstrap/ng-bootstrap": "5.1.1",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^8.2.0",
    "@ngrx/router-store": "^8.2.0",
    "@ngrx/store": "^8.2.0",
    "@swimlane/ngx-datatable": "15.0.2",
    "@types/lodash": "^4.14.136",
    "ag-grid-angular": "^20.2.0",
    "ag-grid-community": "^20.2.0",
    "angular-tree-component": "^8.4.0",
    "angular2-csv": "^0.2.9",
    "angular2-hotkeys": "^2.1.5",
    "core-js": "^3.1.4",
    "font-awesome": "^4.7.0",
    "lodash": "^4.17.15",
    "ng-http-loader": "^6.0.1",
    "ngrx-store-localstorage": "^8.0.0",
    "ngx-clipboard": "^12.2.0",
    "primeicons": "^2.0.0",
    "primeng": "^8.0.2",
    "reselect": "^4.0.0",
    "rxjs": "^6.5.2",
    "rxjs-compat": "6.5.2",
    "zone.js": "^0.10.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.0",
    "@angular/cli": "8.2.0",
    "@angular/language-service": "8.2.0",
    "@types/jasmine": "^3.3.16",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.1.0",
    "jasmine-core": "^3.4.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "ngrx-store-logger": "^0.2.4",
    "protractor": "~5.1.2",
    "ts-node": "~8.3.0",
    "tslint": "^5.18.0",
    "typescript": "^3.5.3",
    "webpack": "^4.39.1"
  }

升级后的 package.json:

{
  "name": "xxxxxx",
  "version": "18.5.0",
  "license": "UNLICENSED",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start-ssl": "node --max_old_space_size=2000000 ./node_modules/@angular/cli/bin/ng serve --proxy-config proxy.conf.json --ssl true --prod",
    "start-nossl": "node --max_old_space_size=2000000 ./node_modules/@angular/cli/bin/ng serve --proxy-config proxy.conf.json --prod",
    "build": "ng build",
    "build-prod": "node --max_old_space_size=2000000 ./node_modules/@angular/cli/bin/ng build --prod --base-href /caui/",
    "build-prod19": "node --max_old_space_size=2000000 ./node_modules/@angular/cli/bin/ng build --prod --base-href /caui19/",
    "build-test": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng test --watch=false -cc",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.1",
    "@angular/common": "~11.2.1",
    "@angular/compiler": "~11.2.1",
    "@angular/core": "~11.2.1",
    "@angular/forms": "~11.2.1",
    "@angular/platform-browser": "~11.2.1",
    "@angular/platform-browser-dynamic": "~11.2.1",
    "@angular/router": "~11.2.1",
    "@angular/cdk": "11.1.1",
    "@ng-bootstrap/ng-bootstrap": "5.1.1",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^11.0.1",
    "@ngrx/router-store": "^11.0.1",
    "@ngrx/store": "^11.0.1",
    "@swimlane/ngx-datatable": "19.0.0",
    "@types/lodash": "4.14.160",
    "@types/mousetrap": "^1.6.5",
    "mousetrap": "^1.6.5",
    "ag-grid-angular": "^25.0.1",
    "ag-grid-community": "^25.0.1",
    "angular-tree-component": "^8.5.6",
    "angular2-csv": "^0.2.9",
    "core-js": "^3.8.3",
    "font-awesome": "^4.7.0",
    "lodash": "^4.17.15",
    "ng-http-loader": "^9.1.0",
    "ngrx-store-localstorage": "^10.1.2",
    "ngx-clipboard": "^14.0.1",
    "primeicons": "^4.1.0",
    "primeng": "^11.2.0",
    "reselect": "^4.0.0",
    "rxjs": "~6.6.0",
    "rxjs-compat": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.1",
    "@angular/cli": "~11.2.1",
    "@angular/compiler-cli": "~11.2.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.2",
    "ngrx-store-logger": "^0.2.4",
    "webpack": "^4.39.1"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "esnext",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
    
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false
  }
}

知道有什么问题吗?

标签: angulartypescriptwebpack

解决方案


原来我必须在 angular.json 中关闭 buildOptimizer。


推荐阅读