CODEWITHSUNDEEP
angularangular-material
Jack Noseworthy
Jack Noseworthy

Reputation: 53

Angular Material Components Absent on Deployment

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: enter image description here

Here is what the app looks like when it is deployed and run on the server: enter image description here

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!

Upvotes: 0

Views: 410

Answers (2)

Jack Noseworthy
Jack Noseworthy

Reputation: 53

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".

Upvotes: 0

The Fabio
The Fabio

Reputation: 6250

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

Upvotes: 1

Related Questions