我最近从 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)
我发现升级后，在由此生成的节点模块中没有声明一堆声明，AppExclusionType 是其中之一。在它前面添加一个 'var' 或 'const' 解决了这个问题。同样的问题出现在多个其他枚举上，类也有同样的问题。另一种是支付。
为了帮助澄清这个问题，导致问题的一个这样的枚举是 AppExclusionType = { ALL : "ALL", MARKET : "MARKET", SEARCH : "SEARCH", INSTALL : "INSTALL" };
并通过在其前面添加 var 来修复错误，如下所示： var AppExclusionType = { ALL : "ALL", MARKET : "MARKET", SEARCH : "SEARCH", INSTALL : "INSTALL" };
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句