In the Angular CLI, what is the difference between the --target and --environment options when running the build command?
From the documentation:
ng build can specify both a build target (--target=production or --target=development) and an environment file to be used with that build (--environment=dev or --environment=prod). By default, the development build target and environment are used.
However, they never really clarify the distinction between the two.
From what I can gather, the --environment flag controls which environment file (environment.ts vs environment.prod.ts) gets used when doing the build. But then what does --target control?
--environment is a key for the apps[0].environments object from .angular-cli.json
It is like a profile for the running environment (for example: local, development server, test server, CI server, stage server, production server and so on). The value of the apps[0].environments object is a file name with all settings for the environment. There you could set up backend endpoint, keys and whatever else you want. Then you could use it inside your code:
import {environment} from '@environments/environment';
const userEndPoint = `${environment.apiRoot}/user/`;
Every environment could be production (environment.production === true) or non production i.e. development (environment.production === false). This is a target which could be defined also with the next parameter:
--target is a enum of two values: development or production. It is a 'meta' flags, that set other flags:
Flag | --dev | --prod
--- | --- | ---
--aot | false | true
--environment | dev | prod
--output-hashing | media | all
--sourcemaps | true | false
--extract-css | false | true
--named-chunks | true | false
--build-optimizer | false | true with AOT and Angular 5
--prod also sets the following non-flaggable settings:
- Adds service worker if configured in .angular-cli.json.
- Replaces process.env.NODE_ENV in modules with the production value (this is needed for some libraries, like react).
- Runs UglifyJS on the code.
from https://github.com/angular/angular-cli/wiki/build/1cf783837c392f5fadc7286e1fb28220b9a1b507#--dev-vs---prod-builds
From documentation: Build Targets and Environment Files
ng build can specify both a build target (--target=production or
--target=development) and an environment file to be used with that build (--environment=dev or --environment=prod). By default, the
development build target and environment are used.
Build target set to Production has following effects:
- Ahead of time compilation, which means Angular compiler doesn't get included in the final build, which implies faster render, small size
- Hashing of bundle files
- Minification of generated javascript files
- Angular runs in production mode, hence it stops checking every change detection twice
- Progressive Web Apps only work in this mode
--target=production means that angular-cli will use everything for build, that it uses for production. --environment=prod means that the object, that you have in app "environment" will have "production" flag=true.
As of Angular CLI 6, the environment option has been deprecated.
The environment option in build related commands is replaced with fileReplacements, please see the wiki for how it can be used.
The build system has been overhauled to be more easily configurable. Build configuration options have been moved to the workspace configuration file (angular.json).
A "production" configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the --prod option.
The difference between the default development environment and production is that the development configuration uses the CLI defaults (e.g. source maps) while the production configuration enables AOT, optimizations, etc. The --prod meta-flag targets the "production" configuration and enables the runtime production mode.
Switching to production mode makes it run faster by disabling development specific checks such as the dual change detection cycles.
The term "environment" has even been replaced with "build target" in parts of the documentation.
