1

I'm trying to add material design to an angular app without any luck.

I installed material design, added all the modules to the app.moduel.ts file but the components look very bad.

I get this message: 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

I added the link to the head of the index.html file

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

but for some reason I get a Status Code:404 Not Found. I tried to add the css files to assets, which didn't work.

It's a little weird, because if you check the sample app for material design on github there is no link to any theme css file.

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

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

My index.html file looks like this:

<!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>

1 Answer 1

1

It's really depend on how you're structuring and setup your app, but related to Status Code:404 Not Found error I think it's because relative path from index.html to "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"cannot be found, and appending some ../../ would help.

Reference to theming guide documentation:

Alternatively, you can just reference the file directly. This would look something like:

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

The actual path will depend on your server setup.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.