将应用程序更新到 Angular 11 后样式损坏了

Question

我正在尝试更新 Angular 4 项目以达到 Angular 17，当我更新到 Angular 11 时，我注意到某些样式已损坏，但似乎没有任何问题。

我认为重要的事情：

我曾经在 styles.css 文件中包含这些文件，但收到错误消息，即使安装了依赖项，它也无法解析这些文件：

@import "~font-awesome/css/font-awesome.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

我删除了“~”符号，并解决了 IDE 错误，但是在运行时我在 DevTools 网络中收到 404 错误，因此我将这些 CSS 复制到我的资产文件夹中（并修改了导入以指向那里），修复了该问题。现在我没有收到任何 DevTools 错误。另外，当我运行

ng build --prod

时，没有控制台错误。

我正在使用此设置来实现相关依赖项：

"dependencies": {
    "@angular-devkit/schematics": "~11.2.19",
    "@angular/animations": "~11.2.14",
    "@angular/cdk": "~11.2.13",
    "@angular/cli": "~11.2.19",
    "@angular/common": "~11.2.14",
    "@angular/compiler": "~11.2.14",
    "@angular/core": "~11.2.14",
    "@angular/forms": "~11.2.14",
    "@angular/material": "~11.2.13",
    ...
    "@fortawesome/angular-fontawesome": "~0.9.0",
    "@fortawesome/fontawesome-common-types": "~6.1.0",
    "@fortawesome/fontawesome-svg-core": "~6.1.0",
    ...
    "bootstrap": "~3.4.1",
}

我无法显示该应用程序，因为它是针对私人客户的，但基本上我不能使用自定义字体，而且我的两侧菜单看起来完全关闭，任何包含图标或图像的内容都被移动或调整大小，非常糟糕，来自材料的任何内容看起来都像是默认字段，尤其是按钮和输入。

我还尝试将

encapsulation: ViewEncapsulation.None

添加到某些组件以及更新到 bootstrap 4，但都没有任何运气。

我很抱歉无法展示该应用程序的外观，但我真的很感激任何关于它可以是什么的指示。

Answer 1

请参阅font-awesome 软件包的支持表。

好像你的

Angular 11

和

Font Awesome Package 0.9.0

版本不兼容，匹配一下包试试。