"Page Not Found" after deploying SSR enabled Angular 17 application #6505
Description
[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 serveand using the hosting emulator. - Navigating to the hosted URL and then
/browserloads 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.