Angular编译报错：无法解析'./server.component.css'求排查方案

你的组件代码：

import { Component } from "@angular/core";

@Component({
    selector: 'app-server',
    template: `<h1>Some Information</h1>`,
    styleUrls: ['./server.component.css']
})
export class Servercomponent{

}

编译错误信息：

ERROR in ./src/app/server/server.component.ts
Module not found: Error: Can't resolve './server.component.css' in 'E:\Angular\angularapp\angularapp\src\app\server'
i ｢wdm｣: Failed to compile.

可能的原因：

• CSS文件未创建：在E:\Angular\angularapp\angularapp\src\app\server目录下，没有生成server.component.css文件，组件声明了要引入该样式文件但实际不存在。
• 文件名拼写错误：检查文件名是否和代码中的声明完全一致，比如大小写差异（部分编译环境会严格校验）、是否写错后缀（比如写成.scss）或字符。
• 文件路径错误：确认server.component.css是否和组件文件在同一目录下。如果样式文件在子文件夹或上级目录，需要调整styleUrls里的路径，比如子文件夹路径写成./styles/server.component.css，上级目录写成../server.component.css。
• 文件被误操作：原本存在的server.component.css被意外删除，或者被移动到了其他目录，导致编译时无法定位。

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