标签: angular-devkit

升级到 Angular 12 后，我的内容安全策略阻止了正确加载样式。

Angular 12 devkit 似乎向 index.html 中的 CSS 包引用添加了一个新的内联事件处理程序，示例如下。

<link rel="stylesheet" href="styles.5951e4ca367b697db091.css" crossorigin="anonymous" integrity="sha384-2031E8+oC87S0N7NzRGcF8fqx777KEJOgQ3KcUN4aX6xsR3BVaV5sh4fibR5joOc" media="print" onload="this.media='all'">

错误

Refused to execute inline event handler because it violates the following Content Security Policy directive...

这似乎与此 RFC 相关：https : //github.com/angular/angular-cli/issues/18730但我找不到有关如何使用严格（没有“不安全内联”）的更多信息) CSP。

npm audit 在我的项目上运行并得到我这个

@angular-devkit/build-angular [dev] 的高命令注入依赖

路径@angular-devkit/build-angular > @ngtools/webpack > tree-kill

更多信息 https://npmjs.com/advisories/1432

高指令注射

包树杀

已修补 >=1.2.2

@angular-devkit/build-angular [dev] 的依赖

路径@angular-devkit/build-angular > tree-kill

更多信息 https://npmjs.com/advisories/1432

Tree-kill需要更新，但它是一个角度问题，不是我的。所以呢？需要等待 angular-team 将自己的 package.json 更新为更新版本的 tree-kill 吗？

Angular CLI 6引入了一个新的构建器概念(又名Architect Targets).
有一对夫妇的预建的建设者随之而来@angular-devkit/build_angular,但遗憾的是没有文件说明如何创建自己的构建.

如何创建自己的构建器(例如,修改底层webpack配置)？

我最近将我的项目从 angular 版本 7 升级到 8。但是当我发出命令时，npm start我看到了很多与Bootstrap.

WARNING: You probably don't mean to use the color value gray in interpolation here.
It may end up represented as gray, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "gray").
If you really want to use the color value here, use '"" + $color'.

   ?
48 ?   .alert-#{$color} {
   ?            ^^^^^^
   ?
    node_modules/bootstrap/scss/_alert.scss 48:12  @import
    src/scss/bootstrap.scss 46:9 …

当我使用 Angular Universal 运行应用程序时，我发现 TTFB 存在巨大差异。ssr 比正常的角度命令花费更多时间。如何使用 Angular 通用服务器端渲染改进 TTFB？

npm run serve:ssr

性能选项卡：

ng serve

查了很多网站，但到目前为止还没有在互联网上找到任何相关的解决方案。

当我这样做时ng serve，日志会显示如下错误：

Error from chokidar (/PATH_OF_MY_PROJECT/node_modules/ionicons/dist/ionicons/svg): Error: ENOSPC: System limit for number of file watchers reached, watch '/PATH_OF_MY_PROJECT/node_modules/ionicons/dist/ionicons/svg/ios-subway.svg'

我读到解决方案是在 Linux 上更改观察者文件，但这是一个糟糕的解决方案！

为什么 Angular 需要看到对 的更改node_modules？这是一个不会改变的文件夹。如果我需要安装一个新库，我可以重新启动服务器。

如果您的解决方案是：请不要回答我 echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf。我不想使用这个糟糕的解决方案。

堆栈： 带有 .NET 的 Angular 12，在 Docker 容器中运行。捆绑包正在由 @angular-devkit/build-angular:browser 构建。

最后的工作设置： 该应用程序之前在 Angular 7 上运行，所有资产确实都是通过 HTTPS 提供的。

问题： 当通过 HTTPS 运行时，Angular 12 捆绑包正在提供资产，包括。通过 HTTP 的 main.js、polyfills、样式表或 favicon。这会导致包、polyfills、styles.css 和 favicons 出现以下错误：

混合内容：页面通过 HTTPS 加载，但请求不安全的 X。此请求已被阻止；内容必须通过 HTTPS 提供。

我的第一个问题是 ng 构建过程，尽管我不知道如何确定提供资源的方式（？），因此我提到了堆栈的其余部分，以便在需要时进行检查。

更新：我标记了一个答案，但这是一种解决方法，我决定采用足够好的方法，尽管应该有一个我仍然希望找到的更深入的解决方案。

我是 Angular 的新手，正在按照文档构建一个基本的应用程序。

节点 - v14.7.3
\nnpm - 7.22.0
\nAngular CLI：12.2.4 \n
操作系统：win32 x64
\n@angular-devkit/architect 0.1202.4
\n@angular-devkit/build-angular 12.2.4
\n@角度-devkit/核心 12.2.4
\n@角度-devkit/schematics 12.2.4
\n@schematics/角度 12.2.4
\nrxjs 6.6.7
\ntypescript 4.3.5

到目前为止我所做的就是

npm install @angular/cli

其次是ng new firstApp

和ng serve

以下是我收到的错误，

\xe2\x88\x9a Browser application bundle generation complete.\n\nInitial Chunk Files | Names         |     Size\nruntime.js          | runtime       |  4.89 kB\nmain.js             | main          |  3.56 kB\npolyfills.js        | polyfills     |  3.55 kB\nstyles.js           | styles        |  3.54 kB\n\n                    | …

简而言之，我正在寻找一种方法来获得更详细的输出ng test。

我不是在寻找更多的测试输出，而是在寻找有关配置的更详细的反馈。

我正在尝试配置一个项目，当某些配置不正确时，我从 CLI 得到的反馈很少。

例如，在运行时ng test，我当前得到一个托管 jasmine 的 chrome 窗口，但找到了 0 个规格，并且http://localhost:9876/ karma_webpack /main.js为404。