Angular/ssr 20 site doesn't properly use hashed main.js filename when deployed to firebase app hosting #30735
Description
Command
build
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
Issue with requested main.js filename not including the hash when deployed to firebase app hosting
Description
I've got an angular/ssr 20.1.1 site where all but one test route is csr (the ssr route is not used in this bug repro). I seem to be having some issues with filename hashing when deploying to firebase app hosting
- ng build --configuration=production
- npm run serve:ssr (to test)
- firebase deploy --only apphosting:mybackend2
when i do step 2 and visit my local site csr page i see main-UKL5WJPJ.js being downloaded successfully
And I see this file in the filesystem: dist\diveplan\browser\main-UKL5WJPJ.js.
When I deploy to firebase app hosting and view my site, I see the network trace refer to main.js without a hash in the filename! This is causing the site to fail to render. There is no dist\diveplan\browser\main.js
packages used:
"@angular/animations": "^20.1.1",
"@angular/cdk": "^20.1.2",
"@angular/common": "^20.1.1",
"@angular/compiler": "^20.1.1",
"@angular/core": "^20.1.1",
"@angular/fire": "^20.0.1",
"@angular/forms": "^20.1.1",
"@angular/google-maps": "^20.1.2",
"@angular/material": "^20.1.2",
"@angular/platform-browser": "^20.1.1",
"@angular/platform-browser-dynamic": "^20.1.1",
"@angular/platform-server": "^20.1.1",
"@angular/router": "^20.1.1",
"@angular/ssr": "^20.1.1",
Here's my angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"diveplan": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"stylePreprocessorOptions": {
"includePaths": ["src/app"]
},
"outputPath": {
"base": "dist/diveplan"
},
"index": "src/index.html",
"polyfills": ["src/polyfills.ts"],
"tsConfig": "tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss"
],
"scripts": [],
"extractLicenses": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true,
"browser": "src/main.ts",
"server": "src/main.server.ts",
"outputMode": "server",
"ssr": {
"entry": "src/server.ts"
}
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": false,
"outputHashing": "all",
"sourceMap": true,
"namedChunks": true,
"extractLicenses": false
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "development"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"buildTarget": "diveplan:build"
},
"configurations": {
"production": {
"buildTarget": "diveplan:build:production"
},
"staging": {
"buildTarget": "diveplan:build:staging"
},
"development": {
"buildTarget": "diveplan:build:development"
}
},
"defaultConfiguration": "development"
},
"serve-ssr": {
"builder": "@angular-devkit/build-angular:ssr-dev-server",
"configurations": {
"development": {
"buildTarget": "diveplan:build:development"
},
"production": {
"buildTarget": "diveplan:build:production"
}
},
"defaultConfiguration": "development"
},
"prerender": {
"builder": "@angular-devkit/build-angular:prerender",
"options": {
"routes": ["/"]
},
"configurations": {
"production": {
"buildTarget": "diveplan:build:production"
},
"development": {
"buildTarget": "diveplan:build:development"
}
},
"defaultConfiguration": "production"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "diveplan:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss"
],
"scripts": []
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "diveplan:serve"
},
"configurations": {
"production": {
"devServerTarget": "diveplan:serve:production"
},
"staging": {
"devServerTarget": "diveplan:serve:staging"
}
}
},
"deploy": {
"builder": "@angular/fire:deploy",
"options": {}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
}
},
"cli": {
"schematicCollections": ["@angular-eslint/schematics"],
"analytics": false
}
}
- Here's my firebase.json:
{
"hosting": [
{
"target": "diveplan",
"public": "dist/diveplan/browser",
"ignore": ["**/.*"],
"headers": [
{
"source": "*.[0-9a-f]{20,}\\.(css|js)",
"headers": [
{
"key": "Cache-Control",
"value": "public,max-age=31536000,immutable"
}
]
},
{
"source": "/assets/cache.json",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=3600"
},
{
"key": "Expires",
"value": "Thu, 01 Jan 2099 00:00:00 GMT"
}
]
},
{
"source": "**/*.pdf",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000"
},
{
"key": "Expires",
"value": "Thu, 01 Jan 2099 00:00:00 GMT"
}
]
},
{
"source": "/assets/octo.png",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000"
},
{
"key": "Expires",
"value": "Thu, 01 Jan 2099 00:00:00 GMT"
}
]
},
{
"source": "**/*.kml",
"headers": [
{
"key": "Content-Type",
"value": "application/vnd.google-earth.kml+xml"
}
]
},
{
"source": "**/*.kmz",
"headers": [
{
"key": "Content-Type",
"value": "application/vnd.google-earth.kmz"
}
]
}
],
"rewrites": [
{
"source": "/api/poi",
"function": "poi"
},
{
"source": "/cookieTest",
"function": "cookieTest"
},
{
"source": "/noaa/**",
"function": "noaaRequest"
},
{
"source": "/helloWorld3",
"function": "helloWorld3"
}
]
}
],
"functions": {
"predeploy": "npm --prefix \"$RESOURCE_DIR\" run build",
"source": "functions"
},
"apphosting": {
"backendId": "mybackend2",
"rootDir": "/",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log",
"functions"
]
}
}
Minimal Reproduction
This is for a production site with many iterations that started from angular 12.
I can try to build a min repro if needed. Should this be working? Any pointers to area of further diagnostics would be appreciated!
Thank you!
Exception or Error
Your Environment
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.2001.1
@angular-devkit/build-angular 20.1.1
@angular-devkit/core 20.1.1
@angular-devkit/schematics 20.1.1
@angular/cdk 20.1.2
@angular/fire 20.0.1
@angular/google-maps 20.1.2
@angular/material 20.1.2
@schematics/angular 20.1.1
rxjs 7.8.2
typescript 5.8.3
zone.js 0.15.1
Anything else relevant?
No response