Speeding up the development serve after upgrading to Angular v12

After you've upgraded to Angular v12 from a previous version of Angular, you may notice your ng serve times have increased, along with missing sourcemaps, and longer rebuild times during development. This post helps you set a default configuration to development to get your application serving the same as previously.

In Angular version 12, running ng build now defaults to production mode. This is a welcomed change, as there is less chance of accidentally deploying a development build to production, which is a lot slower and bigger, giving the perception that Angular is slow. This also aligns with other web frameworks that build for production out of the box.

The way Angular serves the application, it essentially does a build with watch mode. As mentioned before, doing a build is now done by default with production optimizations enabled. This adds more time to the build process.

There is a migration to add a "development" build configuration.

To run this migration, run:

ng update @angular/cli --migrate-only update-angular-config-v12

One caveat is that it only supports migrating first-party Angular builders for development mode, including:

• @angular-devkit/build-angular:dev-server
• @angular-devkit/build-angular:protractor

To fix this manually, you add the development options as defaults, and a defaultConfiguration set to development for the serve target.

Now, when running ng serve you will get a development build, which is faster for local development.

If you liked this, click the ❤️ so other people will see it. Follow me on Twitter for more tips on Angular, Nx, and NgRx!

See Also

• Angular v12 blog post