Angular 12 uses the production build by default. That doesn't mean the development build is gone - but if you don't update your project correctly, you'll end up without development build. Here's how to fix your project again.
Production is the new default
When you create a new Angular project, the commands ng build
and ng serve
use the production build by default. That's good because the production build detects several errors the development build misses. But it's also bad because building in production mode is slow. Plus, debugging a production build isn't as smooth as debugging a development build. Source maps help to cope with minified builds, but they aren't perfect.
You have two options to run an Angular 12 project in development mode:
- You add the parameter
--configuration development
tong serve
. - You modify the
angular.json
. Scan forarchitect -> build -> configurations -> defaultConfiguration
and replaceproduction
bydevelopment
.
What if there's no development build?
After updating to Angular 12, you may end up without development build. That happens if you update the version manually instead of running
ng update @angular/core@12 @angular/cli@12Luckily, it's just a few lines missing in your angular.json
. Open the file, navigate to architect -> build -> configurations
and add these lines, below the definition of the production build:
You'll also want to add the new configuration to the architect -> serve
section:
Other things to update
While you're at it, it may be a good idea to check the configuration of your project. The default configuration of Angular projects has changed considerable over time. Create a new Angular 12 project and compare these files to your old configuration:
- The
tsconfig*.json
files, .browserslistrc,
- and, of course,
angular.json
However, adopting the new tsconfig.json
may result in a lot of work. Contemporary Angular uses rigorous type checking. That's good because it detects many careless mistakes, but if your project relies on the old sloppy type checking (as most projects do), you end up with some homework.
Wrapping it up
After updating to Angular 12, the missing development build turned out to be a major productivity penalty for my PDF viewer showcase. After re-activating the fast development build, everything became smooth again. So I wonder if it's a good idea to default to production build. This may work for small projects, but Angular is targeted for enterprise application which tend to be on the heavy side.
The production build also drops the check raising the ExpressionHasChangedAfterItHasBeenCheckedError
. Getting rid of a dreaded error is a good thing, but defaulting to production mode is the wrong approach. Luckily, it's just a matter of adding a few lines to the configuration files to add the development mode again.