Angular 12 Development Configuration

If you recently upgraded to Angular 12 and run ng serve you may be wondering what happened, as you'll no longer get a development build by default.  Luckily it's straightforward to provide you own development configuration.

In your angular.json file find you apps "build" > "configurations" section and add a "development" entry

"development": {
          "optimization": false,
          "outputHashing": "none",
          "sourceMap": false,
          "namedChunks": false,
          "vendorChunk": false,
          "buildOptimizer": false
}

Next find the "serve" > "configurations" entry and add a "development" entry

 "development": {
          "browserTarget": "<your-app-name>:build:development"
 }

now you can run `ng serve <your-app-name> --configuration=development.

Also, if you haven't already done so, install the Angular DevTools extension as, among other things, it makes navigating your component source easier.  Just click on the component in Angular DevTools then click "Open component source" in the top right corner and you will be taken to the source!!