Angular 应用程序 - 材料设计答案

【问题标题】：Angular app - Material designAngular 应用程序 - 材料设计
【发布时间】：2017-10-21 03:47:34
【问题描述】：

我正在尝试将材料设计添加到角度应用程序中，但没有任何运气。

我安装了材料设计，将所有模块添加到app.moduel.ts 文件中，但组件看起来很糟糕。

我收到这条消息：Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide:https://material.angular.io/guide/theming

我将链接添加到 index.html 文件的头部

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

但由于某种原因，我得到了Status Code:404 Not Found。我试图将 css 文件添加到资产中，但没有成功。

这有点奇怪，因为如果您在 github 上查看 Material Design 的示例应用程序，则没有任何主题 css 文件的链接。

https://github.com/jelbourn/material2-app/blob/master/src/index.html

http://localhost:4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css

我的 index.html 文件如下所示：

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

【问题讨论】：

标签： html css angularjs

【解决方案1】：

这实际上取决于您如何构建和设置您的应用程序，但与 Status Code:404 Not Found 错误有关，我认为这是因为找不到从 index.html 到 "node_modules/@angular/material/prebuilt-themes/indigo-pink.css" 的相对路径，并且附加一些 ../../ 会有所帮助.

参考主题指南文档：

或者，您可以直接引用该文件。这看起来像：

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

实际路径将取决于您的服务器设置。

【讨论】：