firebase-tools: "Page Not Found" after deploying SSR enabled Angular 17 application

[REQUIRED] Environment info

firebase-tools: 12.8.1 @angular/core: "^17.0.1 @angular/common: "^17.0.1 @angular/compiler: "^17.0.0 @anguler/ssr: 17.0.0

Platform: Windows 11, 23H2

[REQUIRED] Test case

See the full repository here: https://github.com/misomarcell/fire-chat

firebase.json

"hosting": {
  "source": ".",
  "target": "fire-chat",
  "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
  "frameworksBackend": {
    "region": "europe-west1"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "fire-chat": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "public",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "server": "src/main.server.ts",
            "prerender": true,
            "ssr": {
              "entry": "server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "fire-chat:build:production"
            },
            "development": {
              "buildTarget": "fire-chat:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "fire-chat:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": ["zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {
            "version": 2,
            "browserTarget": "fire-chat:build:production"
          }
        }
      }
    }
  },
}

[REQUIRED] Steps to reproduce

  • Create a new Angular 17 application via Anguler CLI: ng new
  • Enable dserver-side rendering
  • Add @angular/fire@17.0.0-next.0
  • Enabled webframeworks experiment firebase experiments:enable webframeworks
  • Initialize firebase-tools: firebase init
  • Deploy the aplication using firebase deploy

[REQUIRED] Expected behavior

A server-side rendered website loads when opening firebase web app.

[REQUIRED] Actual behavior

Page Not Found error displayed when opening the firebase web app.

Additional info

  • The app works as expected both serving locally using ng serve and using the hosting emulator.
  • Navigating to the hosted URL and then /browser loads the index.html, but due to 404, it can’t load any of the assets, like js and css files, therefore it’s just an empty white page without any content on it whatsoever.
  • I’d expect either a Cloud Run or a Firebase Function instance acting as the Frontend server, but there are non of either created after the deploy.

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Reactions: 2
  • Comments: 20 (6 by maintainers)

Most upvoted comments

Angular v17 & application builder support is landing with #6480

If anyone wants to try the upcoming support for Angular 17 SSR Apps and can not wait for an official release, you can use "firebase-tools": "firebase/firebase-tools#master" in your package.json. This will use the current master branch from this repository which already contains the changes from https://github.com/firebase/firebase-tools/pull/6480 🚀

@sonallux thank you with your trick I was able to deploy on firebase it looked ok but it was only pre-rendering that was fine SSR is throwing an error Error: listen EADDRINUSE: address already in use :::8080 But I can find why port 8080 is being used by. I can’t find anywhere in google cloud platform this information

I had the same issue. You must remove the run() function in your server.ts file. The express server is started by firebase automatically.

@robin-james Doing this, you serve the application statically, but does not enable SSR

@misomarcell Is not a solution is the old way to use the builder. Angular v17 came with the new builder (see https://angular.dev/tools/cli/build):

@angular-devkit/build-angular:application Builds an application with a client-side bundle, a Node server, and build-time prerendered routes with esbuild.

That’s why you don’t need to separate de browser & server builders.

Found the solution: https://github.com/angular/angularfire/issues/3463#issuecomment-1806493217 Although would be nice to have these things properly set up on project creation.