Angular外部CSS创建与组件调用路径错误排查及解决

Hey there, let's get that CSS loading issue sorted out! The error you're seeing is all about an incorrect file path in your styleUrls array.

What's Going Wrong? #

Your AdminComponent file (admin.component.ts) lives in the /src/app/admin/ directory. When you use ./app/admin/admin.css as the path, Angular tries to look for the CSS file at /src/app/admin/app/admin/admin.css—which doesn't exist at all. That's why you're getting the "Module not found" error.

The Fixes #

You have two simple, working options to correct the path:

1. Use a relative path (recommended)
   Since your CSS file is in the same directory as your component file, you can reference it directly:

   import {Component} from '@angular/core';
   @Component({
     templateUrl: './admin.html',
     styleUrls: ['./admin.css'] // 直接指向同目录下的CSS文件
   })
   export class AdminComponent {
     constructor() {
       // console.log('Admin Component');
     }
   }
   

   You can even omit the ./ and just write admin.css—Angular will still find it correctly.

2. Use an absolute path
   If you prefer to reference from the root of your project, you can use the full path starting with /src:

   styleUrls: ['/src/app/admin/admin.css']
   

Either of these changes should resolve the error and get your external CSS loading properly in the AdminComponent.

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