angular material theme in webpack

Question

I'm trying to set up angular material in my Angular (4) app with webpack, and I see in the documentation that I need to include a default theme for it to work. One of the suggested ways to do that is with

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

in your styles.scss if you are using angular-cli.

Now, I'm not using angular-cli, but I have a main styles.scss, so I included this and my app builds fine, but then when I load it I get an error

GET http://localhost:8080/@angular/material/prebuilt-themes/indigo-pink.css 404 (Not Found) 

So, why is this looking for this file now? shouldn´t webpack look for it during bundling time? And also, what does that ~ mean after the @import ?

Thanks

Answer 1

I followed the Angular guide for Webpack setup , more or less, so I have all my vendor libraries included in a chunk called vendor , based on ./src/vendor.ts . I just inserted

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

in there and Webpack rolled in the theme CSS.

Answer 2

I tried various things to include the material theme within the element.js (as a single file) that I create with "npm run build:client-reports:externals" but no luck.

It only works if I reference the main.js too in the project that I'm trying to use my element.js

How can we include the material theme within the exported element.js as single file without requiring any other reference like main.js

The code is available on https://github.com/semihbas/angular-elements-micro-frontends

Happy to provide more details if required.