I recently upgraded from angular 7 to angular 8 and In am getting an error when I run my code. The code compiles successfully but on the browser I get the error below. anyone know how I can fix this issue? The same error occurs when I upgraded to angular 11. I think the issue might be with bootstrap or webpack as after the upgrade, it was giving me an angular.js styles error which i fixed with the {input: ''} in the angular.json file.
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)
the following is my 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"
}
}
my angular.json is
{
"$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
}
}
notice the styles in the angular.json that are commented are what I had in the previous version, when I uncomment them I get an error and the way around that was to add the input which I added for bootstrap.
finally my 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>
let me know if any further file is needed.
Before I added the {input:} with the bootstrap url in my angular.js file I had the following in my 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"
],
and I was getting the following error until I changed my angular.json style and added the (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)
I found that after the upgrade, a bunch of declarations in the node modules that are generated from this are not declared, AppExclusionType being one of the many. adding a 'var' or 'const' infront of it fixed the problem. The same issue was on multiple other enums and classes have the same issue. Another one is payments.
to help clarify the issue, one such enum that caused the issue was AppExclusionType = { ALL : "ALL", MARKET : "MARKET", SEARCH : "SEARCH", INSTALL : "INSTALL" };
and the error was fixed by adding var infront of it as shown below: var AppExclusionType = { ALL : "ALL", MARKET : "MARKET", SEARCH : "SEARCH", INSTALL : "INSTALL" };