Configure Angular Build Targets For Local, Dev, Stage and Prod

“Alternate configurations” can be created by passing a “target” name to a
--configuration flag.

This article is part of a series on customizing Angular builds.

  1. Configure Angular’s Build System For Local, Dev, Stage and Prod
  2. Favicons for Each Environment
  3. Your App’s Git Branch In the Title (per env.)
Angular build system and configuring build targets
customize angular build environments with the --configuration flag

Add dev, stage and prod commands to your package.json.

Now we’ll setup each one of these build target configurations within the angular.json config.

The configuration above demonstrates that the dev build target fileReplacements array uses environment.dev.ts app-wide, instead of the vanilla environment.ts.

Hint: Look through the docs for more helpful and even complex options.

Add the other build targets stage and prod just like we did with dev above.

One more update to the angular.json file.

So now when we run a serve command we can specify which build system it will use.

Within any Angular file for our app we can:

Now the target build we run will apply the appropriate environment file!

See the Angular doc on this subject and build target configurations.

Hi! I’m passionate about web technology, specifically Angular and all things JavaScript.