为什么 angular2 找不到 index.html 中导入的样式表？答案

【问题标题】：Why does angular2 not find the stylesheet that is imported in index.html?为什么 angular2 找不到 index.html 中导入的样式表？
【发布时间】：2017-08-09 21:17:29
【问题描述】：

我有一个带有 index.html 文件的 angular2 应用程序。我在 index.html 中有这一行

link rel="stylesheet" type="text/css" href="styles.css"

样式表在那里，并且实际上已加载，因为它通过应用 style.css 中定义的样式来影响页面。

但是这个错误是在控制台抛出的。

加载资源失败：服务器响应状态为 404 （未找到）

这个错误我有一段时间了，一直以为我以后会处理它，并认为它与旧版本的angular 2有关。但是现在我在2.3.1上仍然抛出错误在控制台中。我该如何解决这个问题？

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MemberAdmin</title>
  <base href="/">

  <link rel="stylesheet" type="text/css" href="styles.css">

  <script type="text/javascript" src="assets/IndexResources/jquery.js"></script>

  <!--<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" media="all">-->

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


  <!--<link rel="stylesheet" type="text/css" href="assets/IndexResources/angular-calendar.css">-->

  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./assets/smalllogo.png">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

文件夹结构：

【问题讨论】：

也许你不需要那种风格？尝试删除它，看看错误信息是否消失，样式是否保持不变。
能否请您提供完整的index.html 和您的文件夹结构？
是的，我会尽快做的
完成，添加了你想要的东西@echonax。
@Dan 你为什么有？

标签： angular

【解决方案1】：

由于您使用的是@angular/cli，因此您无需将css添加到索引中，只需在.angular-cli.json文件中添加样式表的路径即可。

"styles": [
  "styles.css",
  "css/spinner.css", 
  "css/bootstrap.min.css",
  "css/font-awesome.min.css"
],

【讨论】：