Angular Material Components Absent on Deployment

Question

I am building a web application with angular for my web dev course. This application makes use of the angular material library. Today, I tried to deploy my angular application on my server which I built from scratch with node js (I am using http, not express in case that matters). I successfully ran ng build --prod, created a dist folder, and deployed my application.

The issue is that when I run the deployed version of my application, the angular material components don't work. The best way to explain it is with pictures.

Here is what the app looks like when it is run in development mode:

Here is what the app looks like when it is deployed and run on the server:

All of the material components are gone/aren't displayed properly. Why does this happen? Is there something special/important I have to do to include the libraries/modules in the build version of my application? I am getting the following warning in the console:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/styles.80f2d8e9e393f3581758.css".

Any help is greatly appreciated!

do you have any errors on the console or on the network tab of dev tools? especially errors related to not found css files — The Fabio, Oct 23 '20 at 09:11
@The Fabio Yes there is one warning: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/styles.80f2d8e9e393f3581758.css". — Jack Noseworthy, Oct 23 '20 at 09:25
@The Fabio A node js server I built from scratch. It uses the http library (not express) — Jack Noseworthy, Oct 23 '20 at 09:29

score 1 · Accepted Answer · answered Oct 23 '20 at 09:37

assuming you used the dist folder without changing its contents, I am pretty sure this is a backend issue.

If your ng app builds correctly, it is ready to be served.

its your BE that is having trouble or is missconfigured. Have a look on google about how to spin up a simple nodejs server to serve the dist folder as static files. It should work. Then you'll have to fix your back-end issue, but that's a separate question...

This question illustrates how to do it: Using node.js as a simple web server

You are right, it was the backend. I sent the wrong Content-Type in my header. Thanks for your help! — Jack Noseworthy, Oct 23 '20 at 09:41

score 0 · Answer 2 · answered Oct 23 '20 at 09:39

0

I figured it out! On the off chance anyone else makes the same mistake, it was an issue with the Content-Type response header. I had it set as "text/html" instead of "text/css".

answered Oct 23 '20 at 09:39

Jack Noseworthy

53
7

Angular Material Components Absent on Deployment

2 Answers2