"Page Not Found" after deploying SSR enabled Angular 17 application #6505

misomarcell · 2023-11-10T10:31:17Z

[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.

The text was updated successfully, but these errors were encountered:

misomarcell · 2023-11-10T22:06:06Z

Found the solution: angular/angularfire#3463 (comment)
Although would be nice to have these things properly set up on project creation.

hittten · 2023-11-11T15:27:03Z

@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.

misomarcell · 2023-11-11T15:30:00Z

@hittten The new approach of building the application in a bundle currently does not work with the Firebase deployment, that's why we need to separate the browser and the server. If you have a better solution to this problem, please educate us.

ersimont · 2023-11-11T15:58:10Z

This problem also occurs with non-SSR angular apps starting in v17. I suspect the reason is that in v17, a newly scaffolded app puts it build output in a different path.

Old : dist/project-name/
New: dist/project-name/browser

This is because, as hinted in the linked issue, a newly scaffolded app uses a new builder in angular.json:

Old: @angular-devkit/build-angular:browser
New: @angular-devkit/build-angular:application

A commenter on the linked issue shows they were able to fix it by reverting back to the old builder. The tooling needs to update to support the new builder. I'm not sure if that's the responsibility of this repo, or angularfire.

hittten · 2023-11-11T16:26:20Z

@ersimont @misomarcell

I don't have the solution we have to wait for firebase-tools to make the fix to unterstand the new builder for angular 17: https://esbuild.github.io/

Let's see, I said that it was not a solution because in Angular 17 you can actually use the previous build. So if you really want to use the new build which is much faster and better than webpack, we don't have a solution/workaround for this yet.

There are two problems here:

Not found page: This is because the firebase-tools don't know the route of the browser folder. In the previous version of angular.json, we had something like this:

{
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/myApp/browser",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": [
        "zone.js"
      ],
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      "styles": [
        "src/styles.scss"
      ],
      "scripts": []
    }
  },
  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/myApp/server",
      "main": "server.ts",
      "tsConfig": "tsconfig.server.json",
      "inlineStyleLanguage": "scss"
    },
    "configurations": {
      "production": {
        "outputHashing": "media"
      },
      "development": {
        "buildOptimizer": false,
        "optimization": false,
        "sourceMap": true,
        "extractLicenses": false,
        "vendorChunk": true,
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.development.ts"
          }
        ]
      }
    },
    "defaultConfiguration": "production"
  },
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "guessRoutes": false,
      "routes": [
        "/"
      ]
    },
    "configurations": {
      "production": {
        "browserTarget": "myApp:build:production",
        "serverTarget": "myApp:server:production"
      },
      "development": {
        "browserTarget": "myApp:build:development",
        "serverTarget": "myApp:server:development"
      }
    },
    "defaultConfiguration": "production"
  }
}

As you can see, we have 3 builders here:

  {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/myApp/browser"
    }
  },
  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/myApp/server"
    }
  },
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "guessRoutes": false,
      "routes": [
        "/"
      ]
    }
  }
}

The "output path" determines where the correct folder is for each build: "browser" and "server". If you visit your hosting URL, "/browser", you will see the files, but with errors.

Now in angular 17 with the "@angular-devkit/build-angular:application" builder, the "angular.json" file should be simplified, but firebase-tools doesn't know how to handle it.

The SSR Cloud Function: There is no evidence of implementation in the "firebase deploy" log, I see only hosting logs.

hittten · 2023-11-11T17:35:30Z

@ersimont angularfire is not necessary for a Firebase web framework with SSR deploy. You can see this: https://firebase.google.com/docs/hosting/frameworks/angular The AngularFire is optinal

I have many websites with the minimal for SSR, you can try it:

npm i -g @angular/cli@16 @firebase-tools
ng new myApp --routing --style scss
ng add @nguniversal/express-engine
firebase experiments:enable webframeworks
firebase init hosting
firebase deploy

With this you should have an Angular application with firebase hosting and a ssr cloud function v2 (Cloud run)

mvergarair · 2023-11-15T16:41:39Z

@jamesdaniels does this PR fix this issue? I'm having the same problem on angular 17.

jamesdaniels · 2023-11-17T18:42:35Z

Angular v17 & application builder support is landing with #6480

robin-james · 2023-11-22T11:18:51Z

Hi, I'm noob but this solution seems to work :

1. $ ng build
2. $ Firebase init
(*) Hosting : Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
Hosting Setup
? Detected an existing Angular codebase in the current directory, should we use this? No
? Do you want to use a web framework? (experimental) No

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist/myapp/browser
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
Wrote dist/myapp/browser/404.html
? File dist/MyApp/browser/index.html already exists. Overwrite? No

=> firebase.json
"hosting": { "public": "dist/myapp/browser", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] }

3. $ Firebase deploy

Preview in DevTools => Network, seems good

FranzStrudel · 2023-11-24T08:50:37Z

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

robin-james · 2023-11-24T10:21:32Z

@FranzStrudel

How can I check if the SSR is working ? When I inspect the source code (ctrl+u) all the html appears correctly h1 etc... This was not the case with the old versions it seems to me.

FranzStrudel · 2023-11-24T12:01:06Z

@robin-james

You might have prerender enabled (it is by default)

Set prerender to false in your angular.json and try again.

Note that if you don't have dynamic server side logic (based on auth cookie for instance) you might just go with your setup

sonallux · 2023-11-25T12:29:47Z

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 #6480 🚀

alexdabast · 2023-11-28T23:00:27Z

@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

sonallux · 2023-11-29T07:29:26Z

@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.

alexdabast · 2023-11-29T15:39:14Z

@sonallux thank you again and you seems to understand angular SSR pretty well.
I'm facing a other issue:
We are using directus as "backend" and using their official directus/sdk who is a plain javascript library. So SSR is not rendering any content called by this sdk. If I use HttpClient to do the same request it is working fine.

So I assume that because under the hood the directus/sdk do not use anything related to angular SSR is not kicking in.

Any suggestion on how I could include standard library in the SSR process ?

misomarcell · 2023-12-05T17:00:43Z

Seems like after installing the version of the master branch, the hosting function is being deployed automatically as well, but I'm still getting the old Page Not Found error, plus looking at the SSR function's log, it's still seems to compiled incorrectly: TypeError: require(...).app is not a function

9kubczas4 · 2023-12-05T19:42:48Z

Hi @misomarcell,
I was able to deploy some demo Angular v17 app with basic routing to Firebase using master version of the firebase-tools. The deployment went without problems, and also deployed app works.
I've prepared a simple repository: https://github.com/9kubczas4/ng-firebase-deploy-test.

I've a question, are you deploying master branch from this repository: https://github.com/misomarcell/fire-chat?

sonallux · 2023-12-05T20:08:20Z

@sonallux thank you again and you seems to understand angular SSR pretty well.
I'm facing a other issue:
We are using directus as "backend" and using their official directus/sdk who is a plain javascript library. So SSR is not rendering any content called by this sdk. If I use HttpClient to do the same request it is working fine.

So I assume that because under the hood the directus/sdk do not use anything related to angular SSR is not kicking in.

Any suggestion on how I could include standard library in the SSR process ?

The problem is that the request is not executed in a macro task through Zone.js. See this Stack overflow answer for more details.

jamesdaniels · 2023-12-11T16:53:21Z

Closing this issue as v17 support has landed on latest

misomarcell added the type: bug label Nov 10, 2023

aalej added the integration: web frameworks label Nov 10, 2023

ersimont mentioned this issue Nov 11, 2023

Deploying SSR enabled Angular 17 application is not supported angular/angularfire#3463

Closed

jamesdaniels closed this as completed Dec 11, 2023

pdela mentioned this issue Mar 7, 2024

Angular 17.1.2 ssr with firebase experiments:enable webframeworks: server respond with "Service Unavailable" or "Internal Server Error" when asking requesting any route instead of root #6847

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Page Not Found" after deploying SSR enabled Angular 17 application #6505

"Page Not Found" after deploying SSR enabled Angular 17 application #6505

misomarcell commented Nov 10, 2023 •

edited

Loading

misomarcell commented Nov 10, 2023

hittten commented Nov 11, 2023

misomarcell commented Nov 11, 2023

ersimont commented Nov 11, 2023

hittten commented Nov 11, 2023 •

edited

Loading

hittten commented Nov 11, 2023

mvergarair commented Nov 15, 2023 •

edited

Loading

jamesdaniels commented Nov 17, 2023

robin-james commented Nov 22, 2023

FranzStrudel commented Nov 24, 2023

robin-james commented Nov 24, 2023

FranzStrudel commented Nov 24, 2023 •

edited

Loading

sonallux commented Nov 25, 2023

alexdabast commented Nov 28, 2023 •

edited

Loading

sonallux commented Nov 29, 2023

alexdabast commented Nov 29, 2023

misomarcell commented Dec 5, 2023 •

edited

Loading

9kubczas4 commented Dec 5, 2023

sonallux commented Dec 5, 2023

jamesdaniels commented Dec 11, 2023

"Page Not Found" after deploying SSR enabled Angular 17 application #6505

"Page Not Found" after deploying SSR enabled Angular 17 application #6505

Comments

misomarcell commented Nov 10, 2023 • edited Loading

[REQUIRED] Environment info

[REQUIRED] Test case

[REQUIRED] Steps to reproduce

[REQUIRED] Expected behavior

[REQUIRED] Actual behavior

Additional info

misomarcell commented Nov 10, 2023

hittten commented Nov 11, 2023

misomarcell commented Nov 11, 2023

ersimont commented Nov 11, 2023

hittten commented Nov 11, 2023 • edited Loading

hittten commented Nov 11, 2023

mvergarair commented Nov 15, 2023 • edited Loading

jamesdaniels commented Nov 17, 2023

robin-james commented Nov 22, 2023

FranzStrudel commented Nov 24, 2023

robin-james commented Nov 24, 2023

FranzStrudel commented Nov 24, 2023 • edited Loading

sonallux commented Nov 25, 2023

alexdabast commented Nov 28, 2023 • edited Loading

sonallux commented Nov 29, 2023

alexdabast commented Nov 29, 2023

misomarcell commented Dec 5, 2023 • edited Loading

9kubczas4 commented Dec 5, 2023

sonallux commented Dec 5, 2023

jamesdaniels commented Dec 11, 2023

misomarcell commented Nov 10, 2023 •

edited

Loading

hittten commented Nov 11, 2023 •

edited

Loading

mvergarair commented Nov 15, 2023 •

edited

Loading

FranzStrudel commented Nov 24, 2023 •

edited

Loading

alexdabast commented Nov 28, 2023 •

edited

Loading

misomarcell commented Dec 5, 2023 •

edited

Loading