Hello friends,
I have a barebones Angular 11 project with Angular Material for styles. I intend to host this with a Google Cloud Function. When I run the project using npm run dev:ssr, it runs without problem. However, after I use AngularFire's ng deploy function, it does deploy the universal project as a cloud function but the JS and CSS files are not loaded. See screenshots below.
image
vs
image

So why aren't the styles/js being applied in the cloud function? If I look in my cloud function logs, I have some 304 error messages. If I look in the console of the page, I have 403 error codes for requested style/js files. I noticed that the html has linked the files as shown here:

<link rel="stylesheet" href="styles.dbb0bce96e655a5b656e.css">

However, if edit the html with an explicit url, it works.

<link rel="stylesheet" href="https://us-central1-inhouse-dev-ddaad.cloudfunctions.net/ssr/styles.dbb0bce96e655a5b656e.css">

You can find my entire project here on github. I don't know how to fix this issue because I don't know what the source of the issue is.
The only thing I can think of is the code that the cloud function receives is different that when I run ng deploy.

I couldn't get any answers on Stack Overflow so here I am. Hope someone can help. Thanks :)
https://stackoverflow.com/questions/65338352/angular-universal-deployed-to-cloud-function-not-loading-styles-or-js/65345309#65345309