Angular 5/cli组件styleUrls数组报错：期望styles为字符串数组

嘿，我来帮你捋清楚这个问题～

首先针对你遇到的 Uncaught Error: Expected 'styles' to be an array of strings 报错，虽然你确认自己写的是字符串数组，但可以先快速检查两个小细节：

• 有没有不小心在数组里混入了非字符串内容？比如误写了变量、对象，或者用了中文引号这类格式错误
• 相对路径 ../../styles.css 是不是真的准确指向了全局样式文件的位置？可以核对下文件层级是否匹配

不过更核心的是你自己提到的更新点——Angular CLI 的全局样式配置已经帮你处理了样式合并，完全不需要在组件的 styleUrls 里重复引入全局样式表！

为什么不建议在组件里引入全局样式？ #

Angular CLI 在构建项目时，会把 angular-cli.json（Angular 6+ 版本是 angular.json）中 styles 数组里配置的所有样式文件，打包合并成全局生效的样式文件。如果在组件里再引入一次，会导致：

• 样式代码重复打包，增加最终产物的体积
• 触发编译逻辑冲突，就是你遇到的这个报错

正确的处理方式 #

1. 确保 angular-cli.json 里的全局样式配置已经包含你的通用样式：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "../node_modules/font-awesome/css/font-awesome.css",
  "./styles.css"
],

2. 组件的 styleUrls 只保留当前组件的专属样式即可：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

这样既不会有编译报错，还能保证全局样式在整个应用中生效，同时组件样式也能遵循 Angular 的样式封装机制，只作用于当前组件。

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