Beyond Java

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 to ng serve.
• You modify the angular.json. Scan for architect -> build -> configurations -> defaultConfiguration and replace production by development.

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

Luckily, 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.