angular - 从 angular 7 升级到 angular 8 或 10 会导致问题

Question

我最近从 angular 7 升级到 angular 8，并且在运行代码时出现错误。代码编译成功，但在浏览器上出现以下错误。有谁知道我该如何解决这个问题？当我升级到 Angular 11 时也会发生同样的错误。我认为问题可能出在 bootstrap 或 webpack 上，因为升级后，它给了我一个 angular.js 样式错误，我用 angular 中的 {input: ''} 修复了这个错误.json 文件。

Uncaught ReferenceError: AppExclusionType is not defined
at Object../node_modules/remote-pay-cloud-api/base/AppExclusionType.js (AppExclusionType.js:12)
at __webpack_require__ (bootstrap:79)
at Object../node_modules/remote-pay-cloud-api/base/index.js (index.js:10)
at __webpack_require__ (bootstrap:79)
at Object../node_modules/remote-pay-cloud-api/index.js (index.js:8)
at __webpack_require__ (bootstrap:79)
at Module../src/app/_services/ccAuth.ts (category.service.ts:9)
at __webpack_require__ (bootstrap:79)
at Module../src/app/view-cart/view-cart.component.ts (main.js:9669)
at __webpack_require__ (bootstrap:79)

以下是我的 package.json

    {
  "name": "eserver",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "main": "server.js",
    "heroku-postbuild": "ng build --prod",
    "preinstall": "npm install -g @angular/cli @angular/compiler-cli typescript",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "11.0.5",
    "@angular-devkit/core": "^11.0.5",
    "@angular-devkit/schematics": "^11.0.5",
    "@angular/animations": "^11.0.5",
    "@angular/cdk": "^11.0.3",
    "@angular/common": "^11.0.5",
    "@angular/compiler": "11.0.5",
    "@angular/compiler-cli": "^11.0.5",
    "@angular/core": "^11.0.5",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^11.0.5",
    "@angular/localize": "^11.0.5",
    "@angular/material": "^11.0.3",
    "@angular/platform-browser": "11.0.5",
    "@angular/platform-browser-dynamic": "11.0.5",
    "@angular/router": "11.0.5",
    "@fortawesome/fontawesome-free": "^5.6.3",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "^4.0.0",
    "@schematics/angular": "^8.3.29",
    "@types/chart.js": "^2.7.42",
    "@types/express": "^4.17.0",
    "@types/web-bluetooth": "0.0.4",
    "angular-bootstrap-md": "^7.4.3",
    "angular-notifier": "^4.1.1",
    "angular5-csv": "^0.2.11",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "cors": "^2.8.5",
    "css-loader": "^2.1.0",
    "dotenv": "^6.1.0",
    "express": "^4.16.4",
    "express-jwt": "^5.3.1",
    "fontawesome": "^5.6.3",
    "hammerjs": "^2.0.8",
    "jsonwebtoken": "^8.2.2",
    "lodash": "^4.17.11",
    "mat-table-exporter": "^1.0.2",
    "material-design-lite": "^1.3.0",
    "mongodb": "^3.0.10",
    "mongoose": "^5.1.4",
    "ng-multiselect-dropdown": "^0.2.3",
    "node-sass": "^4.14.1",
    "path": "^0.12.7",
    "popper.js": "^1.15.0",
    "pusher": "^2.2.0",
    "pusher-js": "^4.4.0",
    "readable-stream": "^3.6.0",
    "remote-pay-cloud": "^3.1.0",
    "request-promise": "^4.2.4",
    "resize-base64": "^1.0.12",
    "rootpath": "^0.1.2",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.3.3",
    "tslib": "^1.9.0",
    "typescript": "4.0.5",
    "uuid": "^3.3.2",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1100.5",
    "@angular/language-service": "^11.0.5",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "^4.14.135",
    "@types/node": "^8.9.4",
    "angular-cli-ghpages": "^0.6.2",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^7.0.0",
    "ts-node": "~5.0.1",
    "tslint": "~6.1.3",
    "typescript": "~3.2.2"
  },
  "engines": {
    "node": "10.9.0",
    "npm": "6.9.0"
  }
}

我的 angular.json 是

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "softServer": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies" : [
              "socket.io-client", //Warning related packages*
              "socket.io-parser",
              "remote-pay-cloud",
              "remote-pay-cloud-api",
              "moment",
              "rxjs",
              "rxjs/Observable",
              "lodash",
              "debug"
            ],
            "outputPath": "dist/softServer",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              {
                "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css"
              },{
                "input": "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
              },{
                "input": "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"
              },{
                "input": "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
              },
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              /*"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",*/
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "softServer:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "softServer:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "softServer:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "softServer-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "softServer:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "softServer:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "add-tip": {
      "root": "projects/add-tip/",
      "sourceRoot": "projects/add-tip/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/add-tip",
            "index": "projects/add-tip/src/index.html",
            "main": "projects/add-tip/src/main.ts",
            "polyfills": "projects/add-tip/src/polyfills.ts",
            "tsConfig": "projects/add-tip/tsconfig.app.json",
            "assets": [
              "projects/add-tip/src/favicon.ico",
              "projects/add-tip/src/assets"
            ],
            "styles": [
              "projects/add-tip/src/styles.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/add-tip/src/environments/environment.ts",
                  "with": "projects/add-tip/src/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"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "add-tip:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "add-tip:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "add-tip:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/add-tip/src/test.ts",
            "polyfills": "projects/add-tip/src/polyfills.ts",
            "tsConfig": "projects/add-tip/tsconfig.spec.json",
            "karmaConfig": "projects/add-tip/karma.conf.js",
            "styles": [
              "projects/add-tip/src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "projects/add-tip/src/favicon.ico",
              "projects/add-tip/src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/add-tip/tsconfig.app.json",
              "projects/add-tip/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "add-tip-e2e": {
      "root": "projects/add-tip-e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/add-tip-e2e/protractor.conf.js",
            "devServerTarget": "add-tip:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "add-tip:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "projects/add-tip-e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "softServer",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  },
  "cli": {
    "analytics": false
  }
}

请注意 angular.json 中注释的样式是我在以前版本中的样式，当我取消注释它们时，我收到一个错误，解决方法是添加我为引导程序添加的输入。

最后是我的 index.html

<!DOCTYPE html>
<html>
<head>
  <script> if (global === undefined) { var global = window; } </script>
  <base href="/"/>
  <title>eServer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    a {
      cursor: pointer
    }
  </style>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <link  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600&display=swap" rel="stylesheet">
</head>
<body style="background-color: white;">
<app-root>
  <div class="load">
    <div class="spinner-border" style="width: 10rem; height: 10rem;" role="status">
    </div>
  </div>
</app-root>
</body>
</html>

让我知道是否需要任何进一步的文件。

在我在 angular.js 文件中添加带有引导 URL 的 {input:} 之前，我的 angular.js 中有以下内容

  "styles": [
              "./node_modules/@angular/material/prebuilt- 
               themes/indigo-pink.css",
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
              "src/styles.scss"
            ],

在我更改了 angular.json 样式并添加了 (input:(url)} 之前，我收到了以下错误

Error: ./node_modules/angular-bootstrap-md/scss/mdb-free.scss
 Module build failed (from ./node_modules/mini-css-extract- 
plugin/dist/loader.js):
ModuleError: Module Error (from ./node_modules/postcss- 
loader/dist/cjs.js):
 (Emitted value instead of an instance of Error) CssSyntaxError: 
 /Users/shahzibsarfraz/core/_masks.scss:75:4: Can't resolve 
 './img/overlays/01.png' in 
 '/Users/shahzibsarfraz/Desktop/REPO/clover- 
 server-fall-20/node_modules/angular-bootstrap-md/scss'

 73 | @each $no, $filename in $patterns {
 74 |   .pattern-#{$no} {
 > 75 |     background: url("#{$image-path}/overlays/#. 
{$filename}.png");
|    ^
76 |     background-attachment: fixed;
77 |   }

at Object.emitError (/Users/shahzibsarfraz/Desktop/REPO/clover-server- 
fall-20/node_modules/webpack/lib/NormalModule.js:173:6)
at /Users/shahzibsarfraz/Desktop/REPO/clover-server-fall- 
20/node_modules/@angular-devkit/build- 
angular/src/webpack/plugins/postcss-cli-resources.js:125:28
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)

Answer 1

出色地。对我来说，问题似乎来自您的三叶草包（remote-cloud-api），因为 AppExclusionType 来自它。对我来说，不涉及 Bootstrap（通常 Bootstrap 的问题会导致 CSS 样式未应用但不会损坏）我的问题是，为了帮助您，在没有“包含”hack 的情况下编译时会引发哪个错误？因为您在应用“包含”黑客之后向我们展示了错误，而不是在不应用它时抛出的错误，这可以帮助我们了解您的真正问题。

Answer 2

我发现升级后，从这里生成的节点模块中的一堆声明没有声明，AppExclusionType 就是其中之一。在它前面添加“var”或“const”可以解决问题。同样的问题出现在多个其他枚举上，并且类也有同样的问题。另一个是付款。

为了帮助澄清问题，导致问题的一个这样的枚举是 AppExclusionType = { ALL : "ALL", MARKET : "MARKET", SEARCH : "SEARCH", INSTALL : "INSTALL" };

并通过添加 var infront 来修复错误，如下所示： var AppExclusionType = { ALL : "ALL", MARKET : "MARKET", SEARCH : "SEARCH", INSTALL : "INSTALL" };