Angular如何加载服务端或外部来源的CSS样式文件

• 不要在组件模板中直接写<link>标签绑定外部样式地址，改为在TS代码中动态创建link标签插入到document.head中，修改后的代码如下：

import {Component, OnInit, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit{
  title = 'angulardynamicss';
  cssUrl = 'http://localhost:8080/api/csspoc/asFile'

  ngOnInit(): void {
    // 动态创建样式表标签插入到全局head中
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = this.cssUrl;
    document.head.appendChild(link);
  }
}

同时删除组件HTML模板中原来的<link>标签代码即可。

• 检查后端接口返回CSS资源的响应头Content-Type字段，必须为text/css，如果返回的是其他类型（比如application/octet-stream），浏览器会直接忽略该样式表，不会应用到页面。
• 如果上述方案仍不生效，可以改为请求CSS文本内容后插入style标签，兼容性更强，示例代码如下：

ngOnInit(): void {
  fetch(this.cssUrl)
    .then(res => res.text())
    .then(cssText => {
      const style = document.createElement('style');
      style.textContent = cssText;
      document.head.appendChild(style);
    })
}

内容的提问来源于stack exchange，提问作者waterijsje