Angular Universal + Firebase cloud functions deployment issue

Question

I've been stuck on this issue for some time now. My Angular project version is 9.0.3. The @angular/fire version is 6.1.4

I have followed the guide here The project builds and renders for the local Express server I have. The problem occurs when I deploy the project to Firebase with a cloud function that will render the application. Running the command ng deploy gives the below error

Error: ENOENT: no such file or directory, open '/home/teebo/Development/motf/dist/motif/browser/index.html'

This issue is linked to a reported issue here

I have investigated and found that in the project's dist folder, a index.original.html file is generated instead of index.html.

I have opened an issue here with no feedback from the maintainers. If there is anything I am missing or there's something I can do to circumvent this issue, please share and any suggestions are appreciated. Any suggestion, comment, anything.

Answer 1

I have found a way to circumvent this issue. This is not a proper solution for the ng deploy issue but at least I can deploy the ssr function.

Because my dist folder is nested in another dist folder (Which does not include the browser build folder), that is why I was getting the error when running ng deploy. Below are steps I've followed to at least be able to deploy.

1. Run ng deploy (It will error out with the above error but will build the app and create a dist folder).
2. Copy the browser folder to the dist folder that does not have it (In my case I have copied it to a dist folder one level up).
3. Deploy the ssr function by running firebase deploy --only functions:ssr (You can change functions:ssr to whatever name you have named your function).

This worked for me; It would save time to write an npm script to do all this but then; I am not sure if my firebase/universal config is wrong or there is a bug with @angular/fire.