I'm currently on angular 19 and have noticed that ng serve
sometimes takes alot of time to build. The average is around 20s but sometimes it takes 40 seconds.
Could I get this any faster? My project is almost fully standalone and fully lazy loaded in the app.routes.ts
Here are some relevant files:
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"isolatedModules": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "bundler",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
package.json
"dependencies": {
"@angular-eslint/eslint-plugin": "^19.0.2",
"@angular-eslint/eslint-plugin-template": "^19.0.2",
"@angular-eslint/template-parser": "^19.0.2",
"@angular/animations": "^19.1.5",
"@angular/cdk": "^19.1.3",
"@angular/common": "^19.1.5",
"@angular/compiler": "^19.1.5",
"@angular/core": "^19.1.5",
"@angular/forms": "^19.1.5",
"@angular/material": "^19.1.3",
"@angular/platform-browser": "^19.1.5",
"@angular/platform-browser-dynamic": "^19.1.5",
"@angular/router": "^19.1.5",
"@eslint/js": "^9.20.0",
"@fortawesome/fontawesome-free": "^6.7.2",
"@jsverse/transloco": "^7.5.1",
"@jsverse/transloco-keys-manager": "^6.1.0",
"@typescript-eslint/eslint-plugin": "^8.24.0",
"@typescript-eslint/parser": "^8.24.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"memoizee": "^0.4.17",
"ngx-toastr": "^19.0.0",
"rxjs": "~7.8.1",
"tslib": "^2.8.1"
},
"devDependencies": {
"@angular-builders/jest": "^19.0.0",
"@angular/build": "^19.1.6",
"@angular/cli": "^19.1.6",
"@angular/compiler-cli": "^19.1.5",
"@types/jest": "^29.5.14",
"@types/memoizee": "^0.4.11",
"angular-eslint": "^19.0.2",
"eslint": "^9.20.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-prettier": "^5.2.3",
"jasmine-core": "~5.6.0",
"jest": "^29.7.0",
"prettier": "^3.5.0",
"prettier-eslint": "^16.3.0",
"typescript": "~5.7.3",
"typescript-eslint": "^8.24.0"
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": false,
"schematicCollections": [
"angular-eslint"
],
"cache": {
"enabled": true,
"environment": "local"
}
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-angular-project": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular/build:application",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "public"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
],
"styles": [
"src/styles.scss",
"./node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"./node_modules/ngx-toastr/toastr.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"budgets": [
{
"type": "initial",
"maximumWarning": "1.5Mb",
"maximumError": "2.5MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "80kB",
"maximumError": "100kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"aot": true,
"sourceMap": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"outputHashing": "all"
}
},
"defaultConfiguration": "development"
},
"serve": {
"builder": "@angular/build:dev-server",
"configurations": {
"production": {
"buildTarget": "admin-panel:build:production"
},
"development": {
"buildTarget": "admin-panel:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular/build:extract-i18n"
},
"test": {
"builder": "@angular-builders/jest:run",
"options": {
"configPath": "./jest.config.ts",
"polyfills": [],
"tsConfig": "tsconfig.spec.json",
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
}
}
}
}
}