Angular + bootstrap throws error Refused to load the image because it violates the following Content Security Policy directive: “default-src 'none'”

Question

I am new to development with Angular, but not new to NPM and Bootstrap. I was doing a tutorial where I copy and pasted text off of the bootstrap website, installed ng-bootstrap and bootstrap-scss via npm, clicked refresh on the browser and it returns the above error. After running ng-serve, the terminal also says it cannot find the bootstrap import, which is weird given my file structure is the same as bootstrap website and everything about my app is copy pasted straight from docs. ng-serve worked to display text alone, but started throwing an error when I added the bootstrap link.

I found this same issue listed under Angular support on github, and the official angular support commented that the issue was nonexistent. After that, there were 30 comments from different people who have this issue. I have tried running rebuild node-sass, deleting and reinstalling node_modules, and changing package.json, all to no avail.

Here is my app.module.ts:

import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, NgbModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The HTML code was copied from https://ng-bootstrap.github.io/#/components/accordion/examples

And the only thing in my scss file is

@import "../node_modules/bootstrap/scss/bootstrap";

No other files within the project have been changed.

Expected: the page will load styled text and widgets.

Output in browser: 'Cannot get /' And in browser console: Refused to load the image ' http://localhost:4200/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.

Answer 1

I fixed it. If you want to use scss for your project, copying the default node_modules path from bootstrap does not work. I made my bootstrap styling show up by changing my file path within styles.scss to @import "../node_modules/bootstrap-scss/bootstrap";