Question

我对使用Angular开发并不陌生，但对NPM和Bootstrap并不陌生。我正在做一个教程，在其中我将文本复制并粘贴到引导网站之外，通过npm安装了ng-bootstrap和bootstrap-scss，单击浏览器上的刷新，它返回上述错误。运行ng-serve之后，终端还说无法找到bootstrap导入，这很奇怪，因为我的文件结构与bootstrap网站相同，并且有关我应用程序的所有内容都直接从docs复制而来。 ng-serve可以单独显示文本，但是在添加引导链接时开始抛出错误。

我在github上的Angular支持下找到了相同的问题，官方Angular支持评论说该问题不存在。在那之后，有30个来自不同问题人士的评论。我试过运行重建node-sass，删除并重新安装node_modules以及更改package.json，全部无济于事。

这是我的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 { }

HTML代码是从https://ng-bootstrap.github.io/#/components/accordion/examples复制的

我的scss文件中唯一的东西是

@import“ ../ node_modules / bootstrap / scss / bootstrap”;

项目中的其他文件均未更改。

预期：该页面将加载样式化的文本和小部件。

在浏览器中的输出： '不能获取 /' 在浏览器控制台中：拒绝加载图像“ http://localhost:4200/favicon.ico”，因为它违反了以下内容安全策略指令：“ default-src'none'”。请注意，未明确设置“ img-src”，因此将“ default-src”用作备用。

Answer 1

我修复了它。如果要对项目使用scss，则无法从引导复制默认的node_modules路径。我通过将styles.scss中的文件路径更改为@import“ ../node_modules/bootstrap-scss/bootstrap”，来显示引导样式：

Angular +引导程序引发错误拒绝加载图像，因为它违反了以下内容安全策略指令：“ default-src'none'”

1 个答案: