I've been struggling to implement material design into my angular app, but I'm facing some challenges.
After installing material design and adding all the necessary modules to the app.moduel.ts file, the components are not displaying correctly.
An error message pops up saying:
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide:I also added the theme link to the head section of the index.html file
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">However, I am getting a Status Code:404 Not Found for some reason. I attempted to move the css files to the assets folder, but that didn't solve the issue.
It's peculiar because the sample app for material design on github does not include a 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
Here is how my index.html file appears:
<!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>