search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.79k stars 11.98k forks source link

Challenges when running multi-project apps simultaneously resulting in 504 Outdated Optimize Dep errors #28536

Closed caboodal closed 2 months ago

caboodal commented 2 months ago

Command

serve

Is this a regression?

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 depstemp#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
caboodal commented 2 months ago

Thank you for the prompt fix @alan-agius4 we spent several days trying to resolve this thinking we'd got something configured incorrectly 🤣🤣

angular-automatic-lock-bot[bot] commented 1 month ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.