Hello Stackoverflow community,
I am building an angular app with Firebase/AngularFire2 and decided to deploy it on the web for testing purposes using Firebase's Hosting. This is not my first time using Firebase and its hosting function. However, this time around I encounter a strange issue. The development version (as displayed on the localhost using "ng serve") does not look like the Firebase-deployed-for-production version. In fact, the deployed-for-production version lacks a lot of styling. For example, all the mat-select dropdown look like they don't carry any content (even though they do), the dialogs' backgrounds are dark instead of being white and so on and so forth.
However it is worth mentioning that deploying a "development" version works fine. So using "ng build" instead of "ng build --prod" before deploying to Firebase doesn't create this problem. This leads me to thing somewhere in the process of building the "production" version of the app, something is not right and that the problem is not with Firebase's deploy function as the development-deployed version looks and works as expected.
Has anyone encountered something similar before?
Thank you
DEVELOPMENT VERSION (what it should look like) :
PRODUCTION VERSION (what it actually looks like) :
Here is the file structure of my project :
