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)
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...
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?
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?
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.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!
I think he want to target
serve
architect, notbuild
. Something like this.gist.github.com/tieppt/35f7862bb85...
Then you can use
ng serve
with development by default andng build
with production by default.Thanks Tiep.
I updated the code snippet to be more clear.