Challenges when running multi-project apps simultaneously resulting in 504 Outdated Optimize Dep errors #28536
Description
Command
serve
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
No response
Description
We have a multi-project Angular workspace which contains 3 servable apps and several shared libraries. One app is the Identity App and we need to run this and one of the other apps which provide features. I start up the Identity App first and then run the Feature App.
Each time I run ng serve for the Identity App I get a folder in .angular\cache\18.2.5\vite which is named deps_temp_#hash where the hash is different each time. If I run this with a completely empty cache folder every time I run ng serve I get another folder created.
I then run ng serve for the Feature App and I get a similar folder but it quickly disappears and I get a deps folder but all of the temp folders for the Identity App remain.
Typically on first run I now get an error in the Network tab of Chrome DevTools with 504 error always on a file called browser-#hash.js?v=#hash. Upon rerunning ng serve the problem can go away and sometimes it's very difficult to replicate again and then other times it happens all the time. The browser file is requested from disk from the vite cache and it never exists within the cache itself.
Obviously the app is rendered useless when it does happen.
I understand without a repo that replicates this its going to be very difficult to diagnose however I was hoping that somebody with a little more knowledge than myself of this tooling process could provide some guidance as we have come to a full-stop on it other than disabling the cache or just living with the problem.
Minimal Reproduction
Unfortunately I haven't as yet managed to replicate the problem in an example setup outside of our live application. The application uses Duende Identity server and ASP.NET Core minimal API projects along with multiple SQL databases etc. so its not an easy thing to replicate in its entirety.
Exception or Error
504 Outdated Optimize Dep
Your Environment
Angular CLI: 18.2.5
Node: 20.14.0
Package Manager: npm 10.8.3
OS: win32 x64
Angular: 18.2.5
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, platform-browser, platform-browser-dynamic
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1802.5
@angular-devkit/build-angular 18.2.5
@angular-devkit/core 18.2.5
@angular-devkit/schematics 18.2.5
@schematics/angular 18.2.5
ng-packagr 18.2.1
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.10
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"complaints": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"i18n": {
"sourceLocale": "en-GB",
"locales": {
"it": "projects/complaints/src/locale/messages.it.xlf"
}
},
"root": "",
"sourceRoot": "projects/complaints/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"progress": false,
"outputPath": {
"base": "dist/complaints",
"browser": ""
},
"index": "projects/complaints/src/index.html",
"browser": "projects/complaints/src/main.ts",
"polyfills": [
"zone.js",
"@angular/localize/init"
],
"tsConfig": "projects/complaints/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"allowedCommonJsDependencies": [],
"assets": [
{
"glob": "**/*",
"input": "./projects/layout/src/lib/assets",
"output": "./assets"
}
],
"styles": [
"projects/complaints/src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"localize": [
"en-GB",
"it"
],
"budgets": [
{
"type": "initial",
"maximumWarning": "1mb",
"maximumError": "2mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "projects/complaints/src/environments/environment.ts",
"with": "projects/complaints/src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "complaints:build:production"
},
"development": {
"buildTarget": "complaints:build:development",
"proxyConfig": "projects/complaints/proxy.conf.js",
"ssl": true,
"sslKey": "./certs/localhost.key",
"sslCert": "./certs/localhost.pem"
}
},
"defaultConfiguration": "development",
"options": {
"buildTarget": "complaints:build",
"port": 44453
}
},
"extract-i18n": {
"builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
"options": {
"buildTarget": "complaints:build",
"format": "xlf",
"outputPath": "projects/complaints/src/locale",
"targetFiles": [
"messages.it.xlf"
]
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/complaints/src/test.ts",
"polyfills": "zone.js",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"projects/complaints/src/assets"
],
"styles": [
"projects/complaints/src/styles.css"
],
"scripts": []
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist-server",
"main": "projects/complaints/src/main.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"dev": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": true
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false
}
}
}
}
},
"forms": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"i18n": {
"sourceLocale": "en-GB",
"locales": {
"it": "projects/forms/src/locale/messages.it.xlf"
}
},
"root": "",
"sourceRoot": "projects/forms/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"progress": false,
"outputPath": {
"base": "dist/forms",
"browser": ""
},
"index": "projects/forms/src/index.html",
"browser": "projects/forms/src/main.ts",
"polyfills": [
"zone.js",
"@angular/localize/init"
],
"tsConfig": "projects/forms/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"allowedCommonJsDependencies": [],
"assets": [
{
"glob": "**/*",
"input": "./projects/layout/src/lib/assets",
"output": "./assets"
}
],
"styles": [
"projects/forms/src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"localize": [
"en-GB",
"it"
],
"budgets": [
{
"type": "initial",
"maximumWarning": "1mb",
"maximumError": "2mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "projects/forms/src/environments/environment.ts",
"with": "projects/forms/src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "forms:build:production"
},
"development": {
"buildTarget": "forms:build:development",
"proxyConfig": "projects/forms/proxy.conf.js",
"ssl": true,
"sslKey": "./certs/localhost.key",
"sslCert": "./certs/localhost.pem"
}
},
"defaultConfiguration": "development",
"options": {
"buildTarget": "forms:build",
"port": 44454
}
},
"extract-i18n": {
"builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
"options": {
"buildTarget": "forms:build",
"format": "xlf",
"outputPath": "projects/forms/src/locale",
"targetFiles": [
"messages.it.xlf"
]
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/forms/src/test.ts",
"polyfills": "zone.js",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"projects/forms/src/assets"
],
"styles": [
"projects/forms/src/styles.css"
],
"scripts": []
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist-server",
"main": "projects/forms/src/main.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"dev": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": true
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false
}
}
}
}
},
"identity": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"i18n": {
"sourceLocale": "en-GB",
"locales": {
"it": "projects/identity/src/locale/messages.it.xlf"
}
},
"root": "",
"sourceRoot": "projects/identity/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"localize": [
"en-GB"
],
"progress": false,
"outputPath": {
"base": "dist/identity",
"browser": ""
},
"index": "projects/identity/src/index.html",
"browser": "projects/identity/src/main.ts",
"polyfills": [
"zone.js",
"@angular/localize/init"
],
"tsConfig": "projects/identity/tsconfig.app.json",
"allowedCommonJsDependencies": [
"qrcode"
],
"assets": [
{
"glob": "**/*",
"input": "./projects/layout/src/lib/assets",
"output": "./assets"
}
],
"styles": [
"projects/identity/src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"localize": [
"en-GB",
"it"
],
"budgets": [
{
"type": "initial",
"maximumWarning": "1mb",
"maximumError": "2mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "projects/identity/src/environments/environment.ts",
"with": "projects/identity/src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "identity:build:production"
},
"development": {
"buildTarget": "identity:build:development",
"proxyConfig": "projects/identity/proxy.conf.js",
"ssl": true,
"sslKey": "./certs/localhost.key",
"sslCert": "./certs/localhost.pem"
}
},
"defaultConfiguration": "development",
"options": {
"buildTarget": "identity:build",
"port": 44452
}
},
"extract-i18n": {
"builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
"options": {
"buildTarget": "identity:build",
"format": "xlf",
"outputPath": "projects/identity/src/locale",
"targetFiles": [
"messages.it.xlf"
]
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/identity/src/test.ts",
"polyfills": "zone.js",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"projects/identity/src/assets"
],
"styles": [
"projects/identity/src/styles.css"
],
"scripts": []
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist-server",
"main": "projects/identity/src/main.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"dev": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": true
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false
}
}
}
}
}
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"paths": {
"auth": [
"./dist/auth"
],
"common": [
"./dist/common"
]
},
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"isolatedModules": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "bundler",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"lib": [
"ES2022",
"dom"
],
"useDefineForClassFields": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
### Anything else relevant?
The angular workspace is structured as follows: -
root folder
angular.json
package.json
tsconfig.json
projects
common
identity
feature1
feature2