When working with Angular 9, your build structure will look like this:
dist
├── server
| └── main.js and additional files such as Firebase analytics content
└── browser
└── index.html and all browser-related files
To test this setup, run the following command from your project's root directory:
node dist/server
This will execute the main.js file in the server folder and serve your app locally. Information about the localhost URL with the port will be displayed on the screen.
For deployment to Firebase, include the following code:
import * as functions from 'firebase-functions';
import * as path from 'path';
const app = require(path.resolve(__dirname, "./dist/server/main")).app; // adjust the path based on your project structure
const myApp = functions.https.onRequest(app());
You will then have a function named myApp that allows access to your Angular SSR App.
[UPDATE]
The exact location of initializing your functions does not matter as long as the path of dist/server/main is correct in the myApp function.
Another important detail is updating the hosting field in your package.json file with the following configuration:
...
"hosting": [{
"target": "app",
"public": "/dist/browser", // adjust it according to your directory structure
"rewrites": [{
"source": "**",
"function": "myApp"
}]
}]
...
I hope this information proves helpful 😉