DEV Community

Cover image for Speeding up the development serve after upgrading to Angular v12
Brandon Roberts
Brandon Roberts

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (7)

Collapse
 
kapilsoni101 profile image
kapil soni • 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...

Collapse
 
brandontroberts profile image
Brandon Roberts

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?

Collapse
 
kapilsoni101 profile image
kapil soni

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?

Collapse
 
wizonesolutions profile image
Kevin Kaland

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.

Collapse
 
alexpc_ profile image
Alejandro

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!

Collapse
 
tieppt profile image
Tiep Phan

I think he want to target serve architect, not build. Something like this.
gist.github.com/tieppt/35f7862bb85...

Then you can use ng serve with development by default and ng build with production by default.

Collapse
 
brandontroberts profile image
Brandon Roberts

Thanks Tiep.

I updated the code snippet to be more clear.