node.jsangularkendo-uimdbootstrap
Angular 7 to 8 Upgrade: Cannot GET /home, build has no errors
I have an Angular 8 project that uses Kendo-UI and MDBootstrap. ng serve shows no errors, but I get errors when I access localhost:4200/home in Chrome:
Webpage shows this text: Cannot GET /home
Console
15:25:29.258 213db237bbd6bf854a.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-mc5MFFuny++HbPmYE2clhmGeDbhhMCQG815PTPVKnzs='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous) @ 213db237bbd6bf854a.js:1
15:25:29.269 213db237bbd6bf854a.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-mc5MFFuny++HbPmYE2clhmGeDbhhMCQG815PTPVKnzs='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
loadedCallback @ 213db237bbd6bf854a.js:1
15:25:29.271 213db237bbd6bf854a.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-mc5MFFuny++HbPmYE2clhmGeDbhhMCQG815PTPVKnzs='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
loadedCallback @ 213db237bbd6bf854a.js:1
15:25:29.273 213db237bbd6bf854a.js:1 Refused to load the script 'http://jonysource.com/optout/get?jsonp=__mtz_cb_213946739&key=213db237bbd6bf854a&t=1562703929272' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
script @ 213db237bbd6bf854a.js:1
15:25:29.275 213db237bbd6bf854a.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-mc5MFFuny++HbPmYE2clhmGeDbhhMCQG815PTPVKnzs='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
loadedCallback @ 213db237bbd6bf854a.js:1
15:26:18.465 Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
15:26:18.465 Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
15:26:18.465 Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
15:26:18.465 Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
15:26:18.465 Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
15:26:18.082 home:1 Failed to load resource: the server responded with a status of 404 (Not Found)
package.json
{
"name": "eds4",
"version": "1.0.14",
"repository": {
"type": "git",
"url": "git+https://github.com/EleMech/eds4.git"
},
"keywords": [
"angular",
"kendo-ui",
"EDS4",
"EleMech",
"Business",
"Software"
],
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/common": "^8.0.0",
"@angular/compiler": "^8.0.0",
"@angular/core": "^8.0.0",
"@angular/forms": "^8.0.0",
"@angular/http": "^7.2.15",
"@angular/platform-browser": "^8.0.0",
"@angular/platform-browser-dynamic": "^8.0.0",
"@angular/pwa": "^0.800.1",
"@angular/router": "^8.0.0",
"@angular/service-worker": "^8.0.0",
"@fortawesome/fontawesome-free": "^5.8.2",
"@progress/kendo-angular-buttons": "^4.0.0",
"@progress/kendo-angular-dateinputs": "2 - 3",
"@progress/kendo-angular-dialog": "^3.12.1",
"@progress/kendo-angular-dropdowns": "2 - 3",
"@progress/kendo-angular-excel-export": "1 - 2",
"@progress/kendo-angular-grid": "^3.14.4",
"@progress/kendo-angular-inputs": "2 - 5",
"@progress/kendo-angular-intl": "^1.0.0",
"@progress/kendo-angular-l10n": "^1.1.0",
"@progress/kendo-angular-label": "^1.4.0",
"@progress/kendo-angular-popup": "^2.0.0",
"@progress/kendo-angular-resize-sensor": "^3.2.0",
"@progress/kendo-angular-ripple": "^1.2.0",
"@progress/kendo-angular-scheduler": "^0.13.2",
"@progress/kendo-angular-tooltip": "^1.2.2",
"@progress/kendo-data-query": "^1.0.0",
"@progress/kendo-date-math": "^1.4.1",
"@progress/kendo-drawing": "^1.0.0",
"@progress/kendo-recurrence": "^1.0.0",
"@progress/kendo-theme-material": "^2.5.1",
"@progress/telerik-angular-report-viewer": "^7.19.514",
"@telerik/kendo-intl": "^1.5.2",
"@types/chart.js": "^2.7.53",
"@types/express": "^4.16.1",
"@types/lodash": "^4.14.133",
"@types/pluralize": "0.0.29",
"@types/socket.io": "^2.1.2",
"@types/socket.io-client": "^1.4.32",
"@types/ws": "^6.0.1",
"angular": "^1.7.8",
"angular-bootstrap-md": "^7.5.3",
"angular-websocket": "^2.0.1",
"angular2-websocket": "^0.9.8",
"bootstrap": "^4.3.1",
"chart.js": "^2.8.0",
"core-js": "^3.1.3",
"easy-pie-chart": "^2.1.7",
"express": "^4.17.1",
"font-awesome": "^4.7.0",
"git-update": "^1.1.3",
"hammerjs": "^2.0.8",
"inactivity-timer": "^1.0.0",
"isomorphic-ws": "^4.0.1",
"jest-serializer": "^24.4.0",
"jquery": "^3.4.1",
"libphonenumber-js": "^1.7.18",
"lodash": "^4.17.11",
"minimatch": "^3.0.4",
"moment": "^2.24.0",
"moment-business-days": "^1.1.3",
"moment-duration-format": "^2.3.1",
"moment-precise-range-plugin": "^1.3.0",
"ng-uikit-pro-standard": "git+https://oauth2:[email protected]/mdb/angular/ng-uikit-pro-standard.git",
"ngx-logger": "^3.3.13",
"ngx-spinner": "^7.1.4",
"npm": "^6.9.0",
"npm-install-missing": "^0.1.4",
"passport-ldapauth": "^2.1.3",
"pluralize": "^8.0.0",
"pusher-angular": "^1.0.0",
"queueing-subject": "^0.3.0",
"rxjs": "^6.5.2",
"rxjs-websockets": "^7.0.0",
"screenfull": "^4.2.0",
"socket.io": "^2.2.0",
"socket.io-client": "^2.2.0",
"ws": "^7.0.0",
"zone.js": "^0.9.1",
"rxjs-compat": "^6.0.0",
"@progress/kendo-theme-default": "latest"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.800.1",
"@angular/cli": "^8.1.0",
"@angular/compiler-cli": "^8.0.0",
"@angular/language-service": "^8.0.0",
"@types/jasmine": "^3.3.13",
"@types/jasminewd2": "~2.0.6",
"@types/jquery": "^3.3.29",
"@types/node": "^12.0.4",
"codelyzer": "~5.1.0",
"gulp": "^4.0.2",
"gulp-typescript": "^5.0.1",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"jest": "^24.8.0",
"karma": "^4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "^5.4.2",
"terser": "^4.0.0",
"ts-node": "~8.2.0",
"tslint": "~5.17.0",
"typescript": "^3.4.5"
},
"optionalDependencies": {
"bufferutil": "^4.0.0",
"utf-8-validate": "^5.0.1"
},
"resolutions": {
"uglify-es": "npm:terser"
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"allowJs": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"paths": {
"core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
"core-js/es6/*": ["node_modules/core-js/es/*"]
},
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
ng --version
Angular CLI: 8.1.0
Node: 12.6.0
OS: win32 x64
Angular:
...
Package Version
------------------------------------
@angular-devkit/architect 0.801.0
@angular-devkit/core 8.1.0
@angular-devkit/schematics 8.1.0
@schematics/angular 8.1.0
@schematics/update 0.801.0
rxjs 6.4.0
Because I get no build errors I am not sure what the issue is and how to fix it. The project worked previously with Angular 7.
Solution
I think my problem was that in angular.json I had these options set:
{
"projects": {
"eds4": {
"architect": {
"build": {
"options": {
"deployUrl": "/eds4/",
"baseHref": "/eds4/",
}
}
}
}
}
}
I needed to go to http://localhost:4200/eds4/login not http://localhost:4200/login.