Refused to load the image because it violates the following Content Security Policy directive (favicon)

Question

When I start the server I get the following error:

Refused to load the image \'http://localhost:4200/favicon.ico\' because it violates the following

Answer 1

I came here to find an answer to the same question but I solved it myself. I had an angular compilation error in my app (I hadn't run ng build) and the error above was masking this problem. I had missed some properties on an object I was using in a resolver.

I'm running Angular ~7.x

Answer 2

I had the same problem under Linux Mint with Angular 9. Our project worked perfectly on MAC OS X and Windows. After assembling a new desktop and installing Linux I got the same error. All options like upgrade node version, angular version, delete node_modules did not solve the problem. On my machine, the problem was:

!!! The path to the project contained special characters like: %20.

That's because we use Microsoft TFS and the repository name contains spaces, which get translated into %20 and other characters... So if you are frustrated like me, check out your project path, maybe changing your path will fix the issue

Answer 3

As others told already, the error is only masking the real problem.

For me it was the fact that my global Angular CLI version was lower than the one of my project.
Running npm i -g @angular/cli@<desired version> solved the problem and the real error could be displayed and fixed.

Answer 4

You need to check properly in your terminal logs.I was having an error of import in my routing file and correcting that helped me solve this error. I hope it helps someone.

Answer 5

I found another reason that you might get such an error:

In my case, it had nothing to do with the favicon loading, or the CSP header. Rather the sequence in which the express server was started up. There were some asynchronous calls leading up to the express.listen command. This meant that express started listening before it was finished setting up. The net effect of this was, that the CSP header DEFAULT(because my settings not loaded yet) would not allow the favicon to load, in addition to the route path was not being resolved correctly (again, not loaded yet).

Used some .then promise chaining to ensure the correct sequencing of the express startup, and the error vanished - magic :)

Hope this can help someone else with similar issues.

Answer 6

I got this working by running ng update @angular/cli --force

my dependencies below

"dependencies": {
 "@angular/animations": "~8.2.0-next.2",
 "@angular/cdk": "~8.1.1",
 "@angular/common": "~8.2.0-next.2",
 "@angular/compiler": "~8.2.0-next.2",
 "@angular/core": "~8.2.0-next.2",
 "@angular/flex-layout": "^8.0.0-beta.26",
 "@angular/forms": "~8.2.0-next.2",
 "@angular/material": "^8.1.1",
 "@angular/platform-browser": "~8.2.0-next.2",
 "@angular/platform-browser-dynamic": "~8.2.0-next.2",
 "@angular/router": "~8.2.0-next.2",
 "angularfire2": "^5.2.1",
 "core-js": "^2.5.4",
 "firebase": "^6.2.3",
 "hammerjs": "^2.0.8",
 "rxjs": "~6.5.2",
 "tslib": "^1.9.0",
 "zone.js": "~0.9.1"
},
 "devDependencies": {
 "@angular-devkit/build-angular": "~0.801.2",
 "@angular/cli": "^8.1.2",
 "@angular/compiler-cli": "~8.2.0-next.2",
 "@angular/language-service": "~8.2.0-next.2",
 "@types/jasmine": "~2.8.8",
 "@types/jasminewd2": "~2.0.3",
 "@types/node": "~8.9.4",
 "codelyzer": "^5.0.1",
 "jasmine-core": "~2.99.1",
 "jasmine-spec-reporter": "~4.2.1",
 "karma": "~4.0.0",
 "karma-chrome-launcher": "~2.2.0",
 "karma-coverage-istanbul-reporter": "~2.0.1",
 "karma-jasmine": "~1.1.2",
 "karma-jasmine-html-reporter": "^0.2.2",
 "protractor": "~5.4.0",
 "ts-node": "~7.0.0",
 "tslint": "~5.11.0",
 "typescript": "3.4.5"
}