Angular CLI build target vs environment

angularangular-cli

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?

Best Answer

--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

Related Solutions

Php – Post SELECT element value

First of all the javascript code needs a few updates:

$('#fname').val() is better than $('#fname').attr('value') -- .val() will work on selects/checkboxes as well - where .attr('value') won't be reliable.

Second: the data parameter to your $.ajax() call can take a json object (which it will convert to the form string)

$.ajax({
  type: "POST",
  url: "settings.php",
  data: {
    'fname': $('#fname').val(),
    'lname': $('#lname').val(),
    'oname': $('#oname').val()
  },
  success: function(){
    $('form#submit').hide();
    $('div.success').fadeIn();
  }
});

There is a plugin that makes this much easier:

$("form").ajaxForm({
   success: function(){
     $('form#submit').hide();
     $('div.success').fadeIn();
   }
});

UPDATED:

Also - the <select> element was named "dropdown_list" - perhaps you wanted it to be submitting data as "oname" instead. Form elements use the "name" property to submit, the id property only makes css/js selectors easier to code.

Angular – Set base href from an environment variable with ng build

You would have to use APP_BASE_HREF

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: environment.baseHref }]
})
class AppModule {}

See angular doc

EDIT

Since CSS/JS does not work with APP_BASE_HREF, you can do this:

In app.component.ts, inject DOCUMENT via import {DOCUMENT} from "@angular/platform-browser";

constructor(@Inject(DOCUMENT) private document) {
}

Then on your ngOnInit()

ngOnInit(): void {
    let bases = this.document.getElementsByTagName('base');

    if (bases.length > 0) {
      bases[0].setAttribute('href', environment.baseHref);

    }
  }

Best Answer

Related Solutions

Php – Post SELECT element value

Angular – Set base href from an environment variable with ng build

Related Topic