3

我刚刚升级到我的项目到 Angular 12，它有两种延迟加载的样式：

[
   {
      "inject":false,
      "input":"src/styling/dark-style.scss",
      "bundleName":"dark-style"
   },
   {
      "inject":false,
      "input":"src/styling/light-style.scss",
      "bundleName":"light-style"
   }
]

它们都是手动添加到 index.html 的，并且可以使用 Angular 服务手动切换。

我也在 angular.json 中尝试过，但没有任何成功：

"optimization":{
   "styles":{
      "inlineCritical":false
   }
}

问题是升级到 12 后编译器会将所有这些样式添加到 index.html 中，并且现在有些样式正在中断，因为这些额外的样式添加到了 head 部分：

  <style>@charset "UTF-8";:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark...}}</style><link rel="stylesheet" href="dark-style.css" title="dark-style" media="all" onload="this.media='all'"><noscript><link rel="stylesheet" href="dark-style.css"></noscript>
  <style>@charset "UTF-8";:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark...}}</style><link rel="stylesheet" href="light-style.css" title="light-style" media="all" onload="this.media='all'" disabled=""><noscript><link rel="stylesheet" href="light-style.css"></noscript>

在 Angular 12 之前，这些标签不是自动添加的，有没有办法摆脱它们？

4

1 回答 1

0

看来这可能是本网站上写的解决方案：

https://github.com/angular/angular-cli/issues/20864#issuecomment-888433090

而不是使用“优化：真”，尝试使用这个：

      "optimization": {
         "scripts": true,
         "styles": {
           "minify": true,
           "inlineCritical": false
         },
         "fonts": true
      }

这个对我有用。

于 2021-11-17T15:57:32.593 回答