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
- You modify the
angular.json. Scan for
architect -> build -> configurations -> defaultConfigurationand replace
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 runningng update @angular/core@12 @angular/cli@12
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:
- and, of course,
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.