Speeding up the development serve after upgrading to Angular v12

#angular

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!

Top comments (7)

kapil soni • Jun 21 '22 • Edited

Hi Brandon, thanks for this post
I have updated target to development but still its loaded large MB data during ng serve can you please check updated screenshort:

Current CLI
dev-to-uploads.s3.amazonaws.com/up...

Changes According to post:
dev-to-uploads.s3.amazonaws.com/up...

Brandon Roberts • Jun 21 '22

Hi Kapil,

If you have more than one application, you'll need to update the configuration for each one. Did you also add the development configuration itself?

kapil soni • Jun 22 '22

Hi Brandon,
Yes i have more then 1 application in the workspace and i have added development configuration in the each one application but still got issue.can you please let me know how to fix this?

Kevin Kaland • Nov 8 '21

I ran npx @angular/cli@12 update @angular/cli@12 --migrate-only production-by-default after this, and it changed a few things that made the configuration even clearer. I'm not sure what would have happened if I hadn't followed these recommendations first, though.

Alejandro • Jul 10 '21

Hi Brandon, thanks for this post.

There is something I don’t get. Why is good that ng build defaults to production and then we manually changed it to “dev” - isn’t it like undoing what Angular has done in that matter? Wouldn’t be better if Angular/We instead would only change the npm scripts to have start with dev mode + build defaults to prod?

Asking you as you are a reference in Angular world and would love to hear your thoughts on this, if you would like to. (And also because you have wrote about this) :)

Thanks again for the post!