We recently upgraded our Angular project from V10 to V13 using angular-CLI, Angular Metarial library and lazy load routing.

Update guide: update.angular. IO /

Problem: After the upgradeng serveVery slow compilation

It takes 90s+ just to start!

Refactoring times during development have also increased, with every small change, even just a text or style change, having to be recompiled and taking 10s+ 40s

A fierce operation such as tiger, a look at the record of five zero bars, so certainly not good, will greatly reduce the efficiency of development. There are a lot of “ng Serve builds slowly after upgrading to Angular12” issues on Google, which is probably not a problem with my project alone, so here’s how to fix it.

The reason:

In Angular 12, running ng build now defaults to production mode. This is a welcome change because it reduces the chance of accidentally deploying a development build into production, which is much slower and larger, and gives Angular the impression of being slow. This is also consistent with other Web frameworks built for production.

The way Angular serves applications is essentially built in monitoring mode. As mentioned earlier, by default, you build with production optimization enabled. This adds time to the build process.

The solution is to have a migration to add the “Development” build configuration.

To fix this manually, you need to add the development options as the default and set defaultConfiguration to Development for target in Serve.

Example:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json"."version": 1."newProjectRoot": "projects"."projects": {
    "ngv12": {
      "projectType": "application"."schematics": {},
      "root": ""."sourceRoot": "src"."prefix": "app"."architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser"."options": {
            "outputPath": "dist/ngv12"."index": "src/index.html"."main": "src/main.ts"."polyfills": "src/polyfills.ts"."tsConfig": "tsconfig.app.json"."assets": [
              "src/favicon.ico"."src/assets"]."styles": [
              "src/styles.css"]."scripts": []},"configurations": {+"development": {+"vendorChunk": true,
+              "extractLicenses": false,
+              "buildOptimizer": false,
+              "sourceMap": true,
+              "optimization": false,
+              "namedChunks": true+},"production": {
              "fileReplacements": [{"replace": "src/environments/environment.ts"."with": "src/environments/environment.prod.ts"}]."optimization": true."outputHashing": "all"."sourceMap": false."namedChunks": false."extractLicenses": true."vendorChunk": false."buildOptimizer": true."budgets": [{"type": "initial"."maximumWarning": "2mb"."maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle"."maximumWarning": "6kb"."maximumError": "10kb"}]}}, +"defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
+          "defaultConfiguration": ""."options": {+"browserTarget": "ngv12:build:development"
          },
          "configurations": {
            "production": {
              "browserTarget": "ngv12:build:production"}}}}}},"defaultProject": "ngv12"
}
Copy the code

Effect:

It can be seen that the speed is much faster when running again. The project started 60 seconds, and the reconstruction time did not exceed 10 seconds

The resources

Speeding up the development serve after upgrading to Angular v12