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)
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 yourpackage.json
. This will use the currentmaster
branch from this repository which already contains the changes from https://github.com/firebase/firebase-tools/pull/6480 🚀I had the same issue. You must remove the
run()
function in yourserver.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):
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.