Question

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

我安装了材料设计，将所有模块添加到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上检查示例应用程序的材质设计，则没有指向任何主题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>

Answer 1

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

参考主题指南文档：

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

../../

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

角度应用 - 材料设计

1 个答案: