Closed as not planned
Description
Which @angular/* package(s) are the source of the bug?
compiler-cli
Is this a regression?
Yes
Description
After upgrading to Angular 18 from Angular 15 and building an Angular SSR (Server-Side Rendering) application, I encountered a ReferenceError: window is not defined when running the application with npm run serve:ssr. The error appears to be caused by server-side code attempting to access the window object, which is not available in the server environment.
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": false
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"myangularapp": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myangularapp/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": ["src/polyfills.ts"],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/favicon-alert.ico",
"src/ads.txt",
"src/robots.txt",
"src/assets",
"src/manifest.json",
"src/manifest.webmanifest",
"src/sitemaps",
{
"glob": "**/*",
"input": "src/assets/",
"output": "/assets/"
}
],
"styles": [],
"scripts": [],
"extractLicenses": false,
"sourceMap": false,
"optimization": false,
"namedChunks": true
},
"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": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "105kb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"disableHostCheck": true,
"buildTarget": "myangularapp:build"
},
"configurations": {
"production": {
"buildTarget": "myangularapp:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "myangularapp: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/ads.txt",
"src/robots.txt",
"src/assets",
"src/manifest.json",
"src/manifest.webmanifest",
"src/sitemaps"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "myangularapp:serve"
},
"configurations": {
"production": {
"devServerTarget": "myangularapp:serve:production"
}
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/myangularapp/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json",
"sourceMap": false,
"optimization": false,
"buildOptimizer": false
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true,
"buildOptimizer": true
}
},
"defaultConfiguration": ""
},
"serve-ssr": {
"builder": "@angular-devkit/build-angular:ssr-dev-server",
"options": {
"browserTarget": "myangularapp:build",
"serverTarget": "myangularapp:server"
},
"configurations": {
"production": {
"browserTarget": "myangularapp:build:production",
"serverTarget": "myangularapp:server:production"
}
}
},
"prerender": {
"builder": "@angular-devkit/build-angular:prerender",
"options": {
"browserTarget": "myangularapp:build:production",
"serverTarget": "myangularapp:server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
}
}
}
}
}
package.json scripts
"scripts": {
"ng": "ng",
"start": "ng serve --live-reload=false --host 0.0.0.0 --port 4205",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"serve:ssr": "node dist/myangularapp/server/main.js"
},
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version
)
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 18.2.15
Node: 20.18.3
Package Manager: npm 10.8.2
OS: win32 x64
Angular: 18.2.13
... animations, common, compiler, compiler-cli, core
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1802.15
@angular-devkit/build-angular 18.2.15
@angular-devkit/core 18.2.15
@angular-devkit/schematics 18.2.15
@angular/cdk 18.2.14
@angular/cli 18.2.15
@angular/forms 19.2.2
@angular/google-maps 18.2.14
@angular/material 16.2.14
@angular/material-moment-adapter 18.2.14
@angular/ssr 18.2.15
@schematics/angular 18.2.15
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.10
Anything else?
No response