Angular 5中app.component.html引用app.css报404，求正确引用方式

从你给出的错误信息和代码来看，浏览器找不到http://localhost:4200/css/app.css，核心问题是静态资源的引用路径不符合Angular CLI的资源加载规则，我来帮你一步步解决：

一、先明确Angular 5的资源存放规则 #

Angular 5使用旧版的.angular-cli.json配置文件，CLI默认会把src/assets目录下的所有文件复制到编译后的dist目录中，浏览器访问时，localhost:4200对应的就是dist目录的根路径。

二、两种常见场景的正确路径配置 #

场景1：把css文件夹放在src/assets下（推荐做法） #

这是Angular官方推荐的静态资源存放方式，不需要额外修改配置：
将你的app.css放在src/assets/css/目录下，然后把link标签改成：

<link href="/assets/css/app.css" rel="stylesheet">

这里的/表示从网站根目录（也就是localhost:4200）开始查找，能直接定位到dist/assets/css/app.css。

场景2：css文件夹直接放在src目录下 #

如果你想把css文件夹放在src根目录，需要先修改.angular-cli.json：

1. 打开项目根目录下的.angular-cli.json文件
2. 找到apps[0].assets数组，添加"css"，修改后类似：

"apps": [
  {
    "root": "src",
    "outDir": "dist",
    "assets": [
      "assets",
      "favicon.ico",
      "css" // 新增这一行，告诉CLI要复制css文件夹到dist
    ],
    // 其他配置...
  }
]

3. 然后把link标签改成：

<link href="/css/app.css" rel="stylesheet">

三、额外的最佳实践建议 #

你把完整的<html>、<head>、<body>结构写在app.component.html里是不符合Angular开发规范的：

• Angular的入口页面是src/index.html，这里才应该包含完整的html结构
• app.component.html是根组件的模板内容，会通过index.html里的<app-root></app-root>标签插入到页面中

建议你把app.component.html里的内容简化为只保留页面主体部分（比如你的ALBERT文本），把<head>里的样式、meta、link等都移到src/index.html中，这样能避免后续出现更多资源加载或页面结构问题。

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