Question

我正在使用Angular 8.0.0构建SPA。我遇到了exact same issue as described in this Github issue。请注意，还有另外一个related SO question没有被接受的答案。

在GitHub问题中，没有建议的解决方法对我有用。 Angular团队已关闭该问题，并建议发布一个SO问题。

背景

该应用最初在加载根路由http://localhost:4200/时运行，该应用重定向到/records/list，该路由正常运行。

通过单击[routerLink]链接导航到应用程序中的其他路线时，它没有问题。例如，点击由[routerLink]生成的此链接有效：

http://localhost:4200/record/Item?RecordID=1

<a
  [routerLink]="/record/Item]]"
  [queryParams]="{RecordID: id}"
  queryParamsHandling="merge"
>
  {{ id }}
</a>

但是，当重新加载页面或直接在浏览器中键入链接（无需单击routerlink）时，该应用不会加载，并且会显示此错误消息。

注意：该问题同时发生在开发环境中的ng serve和Web服务器上的ng build。该问题仅在使用ng serve进行初始加载时发生，但在ng构建Web服务器上的任何页面重新加载或直接导航中均会发生。我正在使用一个最小的Express应用程序来运行Web服务器，并且我可能会尝试使用Nginx。

浏览器仅显示带有错误消息的空白屏幕： Cannot GET /record/Item/detail

控制台错误：

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.

这是Angular路由模块：

app-routing.module.this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RecordsTableComponent } from './components/records/table/records-table/records-table.component';
import { RecordLandingComponent } from './components/records/landing/record-landing/record-landing.component';
import { RecordDetailComponent } from './components/records/detail/record-detail/record-detail.component';
import { RecordStatusComponent } from './components/records/status/record-status/record-status.component';
import { RecordProposalComponent } from './components/records/proposal/record-proposal/record-proposal.component';
import { RecordsSearchComponent } from './components/records/search/records-search/records-search.component';
import { RecordChangesGuard } from './guards/records/record-changes/record-changes.guard';
import { RecordParamsGuard } from './guards/records/record-params/record-params.guard';

const routes: Routes = [
  { path: 'records/list', component: RecordsTableComponent },
  { path: 'records/search', component: RecordsSearchComponent },
  {
    path: 'record/:RecordType',
    component: RecordLandingComponent, canActivate: [RecordParamsGuard],
    children: [
      { path: '', redirectTo: 'detail', pathMatch: 'full' },
      { path: 'new', component: RecordDetailComponent, canDeactivate: [RecordChangesGuard] },
      { path: 'detail', component: RecordDetailComponent, canDeactivate: [RecordChangesGuard] },
      { path: 'status', component: RecordStatusComponent },
      { path: 'proposal', component: RecordProposalComponent },
    ]
  },
  { path: '**', redirectTo: '/records/list' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

非常感谢@Xesenix指出问题可能是由自定义服务器引起的。我对用于使用ng build创建的角度分布的快速服务器进行了一些调整。服务器似乎正在工作，等待更全面的测试。这是更新的app.js。

const express = require('express');
const http = require('http');
const app = express();

// Set name of directory where angular distribution files are stored
const dist = 'dist';

// Set port
const port = process.env.PORT || 4201;

// Serve static assets
app.get('*.*', express.static(dist, { maxAge: '1y' }));

// Serve application paths
app.all('*', function (req, res) {
  res.status(200).sendFile(`/`, { root: dist });
});

// Create server to listen for connections
const server = http.createServer(app);
server.listen(port, () => console.log("Node Express server for " + app.name + " listening on port " + port));

Answer 2

在您的index.html头部添加一个元标记

`<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: http://localhost:4200;>`

Angular 8拒绝加载图像，因为它违反了以下内容安全策略指令

2 个答案: