最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

build - Why is ng serve so slow in my angular project - Stack Overflow

programmeradmin0浏览0评论

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"
            ]
          }
        }
      }
    }
  }
}
发布评论

评论列表(0)

  1. 暂无评论