CODEWITHSUNDEEP
ionic-framework
Norm
Norm

Reputation: 131

I have an error when executing ionic serve

When I execute ionic serve, it shows the following errors:

Refused to load the image 'http://localhost:8100/favicon.ico' 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.

Failed to load resource: the server responded with a status of 404 (Not Found)

How can I solve this?

Upvotes: 13

Views: 26238

Answers (13)

Raphaël Balet
Raphaël Balet

Reputation: 8491

Same issue here with ionic v5 and angular v10.

You may have this error when you create some error in the variables.scss file.

I was using adding a list of global variable that will be used across the app but I forgot to add a ,.

It didn't create an error while compiling...

The code was :

 $color-settings: (
  'primary': (
    'base': #297bfd,
  )  // <-- Comma is missing here
  'secondary': (
    'base': #297bfd,
  )
}

It will display the same error, I think, it breaks somehow the way ionic compile the scss.

Upvotes: 0

Minnikin
Minnikin

Reputation: 11

I had this error and it was because I had included an import I wasn't actually using. In my example, I had accidently imported Console when using console.log.

I was getting error TS2307: Cannot find module 'console'. in the VS Code terminal, but my error in Chrome was "Refused to load the image 'http://localhost:8100/favicon.ico' 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.

Failed to load resource: the server responded with a status of 404 (Not Found)"

So be aware that this error is not necessarily to do with the favicon.

Upvotes: 1

Abd Abughazaleh
Abd Abughazaleh

Reputation: 5535

I solved by created copy favicon.png from assets/icon/favicon.png to root project folder and rename it to favicon.ico , and also put it on assets/icon/favicon.ico

and also check this answer .

https://stackoverflow.com/a/63749758/8370334

Upvotes: 0

Froylan Almeida
Froylan Almeida

Reputation: 31

I got the same error when I downloaded a new branch of the project, I just run npm install of the lastest components

Upvotes: 0

Mathesh Waran
Mathesh Waran

Reputation: 69

I too faced same error .In my case i have done mistake in importing file

import { IUser } from 'src/app/shared/interfaces/IUser

Changed path like below is fixed error.

import { IUser } from './shared/interfaces/IUser

Cross check your import file. it might helps

Upvotes: 0

Giulio Guaraldi
Giulio Guaraldi

Reputation: 1

I had the exact same problem. I advise you to take a look at your Terminal in VSCode (or the standard terminal if you launched it by there) and look for an ERROR message.

Most likely the problem isn't the favicon.ico blabla stuff but another element of your app, something in a .ts doc for example. Via Terminal you can seek for it in a better way than Chrome, that shows you this unrelated message.

Upvotes: 0

Reaper
Reaper

Reputation: 412

I get same error multiple times,this error throw when u missed any small issue like wrong image path or forget to write import statement of any module/service/component.these error will shown in terminal when u running your project.After fixing these run your project

Upvotes: 0

Mattias
Mattias

Reputation: 840

I had the same error message.

Looking through the logs printed when doing

ionic serve

showed me a bunch of errors, all similar to this 


[ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/global.scss)

[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):

[ng] Error: Cannot find module 'node-sass'

[ng] Require stack:

This lead me to get the application up and running again by

npm install node-sass --save

The compilation process is sometimes spitting out rather confusing error messages from time to time, but with a little digging one can start guessing where to start poking

Upvotes: 10

shurvirpm
shurvirpm

Reputation: 81

I had same issue but solved using below solution.

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico" />

I used .ico file instead of .png file and thats works for me. try once.

Upvotes: 0

Matias Oliva
Matias Oliva

Reputation: 21

I had the same issue. I was able to solve it. I fixed the routing file, I had a route that couldn't load because another route was higher order.

Upvotes: 2

Fernando Garcia
Fernando Garcia

Reputation: 41

I had the same issue after an upgrade. I solved the problem doing:

npm rebuild node-sass

Upvotes: -1

Alejandro
Alejandro

Reputation: 11

Try to change the browser, I fixed this clicking on the url resource which opened firefox and then I've been able to test the app normally on Firefox

Upvotes: -3

Mohit Saxena
Mohit Saxena

Reputation: 1449

Ionic include default favicon icon into index.html file.

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

You can put your favicon icon into "assets/icon" and replace href above.

Upvotes: 1

Related Questions