在 Angular 中使用谷歌字体会引发网络错误 [_ngcontent-X];400[_ngcontent-X];600[_ngcontent-X]

Question

我看到很多这样的网络错误：

>     Request URL: https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300[_ngcontent-c6];400[_ngcontent-c6];600[_ngcontent-c6];700&display=swap
>     Request Method: GET
>     Status Code: 400

它正在将 [ng-content] 添加到请求网址，有办法解决这个问题吗？

在这里您可以看到网络中的错误：https://stackblitz.com/edit/angular-scss-demo-r7csxc?file=src/app/app.component.scss

问候！

Answer 1

解决方法是替换它：

@导入网址（'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap'）;

有了这个：

@导入网址（'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap'）;

@导入网址（'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap'）;

@导入网址（'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap'）;

@导入网址（'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap'）;

@导入网址（'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@700&display=swap'）;

Answer 2

看起来像是编译器中的一个错误；转义某些字符 - 在本例中为分号。

使用 %3B 自己逃脱它们

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200%3B300%3B400%3B600%3B700&display=swap');

https://stackblitz.com/edit/angular-scss-demo-fg9bfg?file=src%2Fapp%2Fapp.component.scss

Answer 3

这发生在我身上，因为有人将 Google API 导入到组件样式表而不是根样式中。

具体来说，在我的例子中，Google API 从根到组件的导入。样式表看起来像这样：

*/component.scss

@use "../styles/fonts";

字体.scss

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

解决方案是仅在根样式表中引用并从组件样式中删除该引用。

我能够通过对生成的文件进行文本搜索“googleapis”来识别有问题的组件。