Angular 14启动报错：Data path "\/styles\/0"必须为对象等问题求助

这个错误是Angular CLI的配置校验失败，和VS Code完全无关。错误提示明确指向angular.json里的styles数组第0项不符合Schema规则：

Error: Schema validation failed with the following errors: Data path "/styles/0" must be object. Data path "/styles/0" must match pattern "\.(?:css|scss|sass|less|styl)$". Data path "/styles/0" must match exactly one schema in oneOf.

解决步骤 #

1. 打开项目根目录的angular.json文件
2. 定位到对应项目的styles配置节点，路径一般是：projects -> [你的项目名称] -> architect -> build -> options -> styles
3. 检查数组第一项的格式，必须满足以下二选一：
   • 是带合法后缀的字符串路径：后缀必须是.css/.scss/.sass/.less/.styl中的一种，比如"src/styles.scss"
   • 是结构完整的对象：必须包含input字段（指定样式文件路径），可选inject（是否注入到页面）、bundleName（打包后的文件名）等字段，示例：

     {
       "input": "src/styles.scss",
       "inject": true
     }
     

4. 修正配置后保存文件，重新执行ng serve或ng build即可。

错误示例与修正对比 #

• 错误写法（无合法后缀）：

  "styles": [
    "src/styles",
    ...
  ]
  

  修正为：

  "styles": [
    "src/styles.scss",
    ...
  ]
  

• 错误写法（格式残缺的对象）：

  "styles": [
    {
      "file": "src/styles.scss"
    },
    ...
  ]
  

  修正为：

  "styles": [
    {
      "input": "src/styles.scss"
    },
    ...
  ]
  

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