-1

So I just discovered Angular material. I wanted to set it up, but the browser can't load the Angular material theme. It gives me the following error:

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

And,

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css".

First, here is the structure of my project:

enter image description here

As you can see I added a element with a link to the indigo-pink theme in the index.hbs file. Before that I tried to import the theme into my styles.css file in the public folder with

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Both ways ended up giving me the same above error. Does someone see what I'm doing wrong?

Edric
  • 24,639
  • 13
  • 81
  • 91
tilly
  • 2,229
  • 9
  • 34
  • 64
  • Possible duplicate of [Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)](https://stackoverflow.com/questions/22631158/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-html-see) – Kyle Krzeski Mar 14 '18 at 16:35
  • Not a duplicate of that. This is a Webpack usage problem. Angular 2+ uses Webpack for bundling. It's an anti pattern to add any local styles to index.html. – funkizer Mar 14 '18 at 16:38

1 Answers1

1

You definitely cannot refer to node_modules in the index.html. @import would be the correct way. Looks like you're using Webpack and not Angular CLI which would make this work automatically, so you need to find a Webpack plugin that handles @import and bundles the styles together, or if you have one, fix your webpack config. Try: https://github.com/webpack-contrib/css-loader

Stephen Docy
  • 4,738
  • 7
  • 18
  • 31
funkizer
  • 4,626
  • 1
  • 18
  • 20