Angular 19 SSR with Firebase hosting or Firebase App Hosting Fail

[hittten]

Deploy angular 19 on firebase hosting or firebase app hosting, not working. But also, if you have an Angular 19 project already created and you run Firebase init, then select the hosting, the Firebase CLI does not create the firebase.json file, instead, it asks you if you want to create a framework. It does not recognize that it is in Angular 19.

Then even by manually putting the firebase.json file and deploying we have several errors on the server.

[REQUIRED] Environment info

firebase-tools:

13.29.1 Or 13.29.2

Platform:
macOS: 15.2 (24C101)

[REQUIRED] Test case

You can go to https://github.com/hittten/angular19ssr

[REQUIRED] Steps to reproduce

git clone --branch ssr-config https://github.com/hittten/angular19ssr.git

npm install

firebase init

// before this point it should recognize the framework

=== Hosting Setup
? Do you want to use a web framework? (experimental) Yes
? What folder would you like to use for your web application's root directory? .
Could not determine the web framework in use.
? Please choose the framework: (Use arrow keys)
❯ Angular
Lit
Next.js
Nuxt
Preact
Svelte

Then even by manually putting the firebase.json file (if you go to main branch you will see the firebase.json file) and deploying we have several errors on the server.

[REQUIRED] Expected behavior

Work on Firebase hosting

[REQUIRED] Actual behavior

The deployment works, i.e. the app deploys without any problem, but then it doesn't work as it should. Error messages are seen in the logs:

INFO 2025-01-26T15:01:32.227333Z Default STARTUP TCP probe succeeded after 1 attempt for container "worker" on port 8080.
DEFAULT 2025-01-26T15:01:32.438634Z Unhandled rejection
ERROR 2025-01-26T15:01:32.439053Z TypeError: app is not a function at /workspace/bootstrap.js:10:19
WARNING 2025-01-26T15:01:32.703852737Z Container called exit(16).
ERROR 2025-01-26T15:01:32.704115Z Error: Process exited with code 16 at process. (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/invoker.js:96:22) at process.emit (node:events:518:28) at process.emit (node:domain:489:12) at process.exit (node:internal/process/per_thread:185:15) at sendCrashResponse (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/logger.js:49:9) at process. (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/invoker.js:89:44) at process.emit (node:events:518:28) at process.emit (node:domain:489:12) at emitUnhandledRejection (node:internal/process/promises:250:13) at throwUnhandledRejectionsMode (node:internal/process/promises:385:19)
{
"textPayload": "Error: Process exited with code 16\n at process. (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/invoker.js:96:22)\n at process.emit (node:events:518:28)\n at process.emit (node:domain:489:12)\n at process.exit (node:internal/process/per_thread:185:15)\n at sendCrashResponse (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/logger.js:49:9)\n at process. (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/invoker.js:89:44)\n at process.emit (node:events:518:28)\n at process.emit (node:domain:489:12)\n at emitUnhandledRejection (node:internal/process/promises:250:13)\n at throwUnhandledRejectionsMode (node:internal/process/promises:385:19)",

[aalej]

Hey @hittten, thanks for reporting this and for providing a test case! I’m seeing a couple of different issues here.

First, firebase init does not detect the framework being used. At the moment, I cannot reproduce this, tried to clone the test case you provided, running firebase init detects the framework being used:

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /<PATH>/issues/8141-1/angular19ssr

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and 
(optionally) set up GitHub Action deploys

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Please input the project ID you would like to use: PROJECT_ID
i  Using project PROJECT_ID(PROJECT_NAME)

=== Hosting Setup
? Detected an existing Angular codebase in the current directory, should we use this? (Y/n) 

Second, the errors raised during the app’s runtime. I was able to reproduce this, got the same error message in the Cloud Run Functions logs:

TypeError: app is not a function at /workspace/bootstrap.js:10:19

Looks like this might be related to #8145. I’ll check this with our engineering team.

Third, for the App Hosting issue, just to verify, are you getting the same error message as the one raised in Hosting?

[aalej]

Quick update: I reached out to our engineering team and they mentioned that #8145 should fix the Hosting issue.

[9kubczas4]

Hi @hittten @aalej,

Also I wasn't able to reproduce the first issue related with not detecting the Angular framework, firebase init works fine using your repo and firebase-tools in versions 13.29.1 and 13.29.2.

I also built the firebase-tools with fix #8145 and it will resolve the issue TypeError: app is not a function but you will need to adjust your server.ts according to Angular 19 changes by adding at the end of the file for example:

/**
 * The request handler used by the Angular CLI (dev-server and during build).
 */
export const reqHandler = createNodeRequestHandler(app);

According to #8145 the server.ts has to export 'app', 'default', or 'reqHandler'.

[hittten]

Thanks to everyone for the support. I had tried a workaround by changing the server.ts file of Angular and adapting it the old way in version 18 and I got it working. I put it in the workaround branch: https://github.com/hittten/angular19ssr/blob/workaround/src/server.ts

But the idea is that since it comes by default in 19, it should work.

I have not tried Fix #8145, but if it solves the problem, then great!

I had also opened the same issue in the angular repository: angular/angular-cli#29488

Regarding Firebase init, it may be a problem with my computer, I tried again and now it has been detected:

=== Hosting Setup
? Detected an existing Angular codebase in the current directory, should we use this? Yes
? In which region would you like to host server-side content, if applicable? europe-west1 (Belgium)
? Set up automatic builds and deploys with GitHub? No

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

But these two files that should have been created are not created :D

[hittten]

Thanks @9kubczas4 I found the best workaround reading the documentation: https://angular.dev/guide/hybrid-rendering#configuring-a-nodejs-server and changing it a little bit: hittten/angular19ssr@e22339c