Angular 2 - angular-cli：在构建时设置全局变量

Question

This is my first time trying to deploy an Angular2 application. I want to set the URL of an API endpoint, and I would like for it to be different in every environment.

Is there a way to make ng build or any other tools that would allow set this for me prior to deployment?

Answer 1

With the Angular CLI tool you can configure different environments.

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.

The mapping used to determine which environment file is used can be found in angular-cli.json:

"apps": {
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

These options also apply to the serve command. If you do not pass a value for environment, it will default to dev for development and prod for production.

You can also add your own env files other than dev and prod .

Then, in your code, you can do a simple check, just like the default one in the main.ts file:

if (environment.production) {
  enableProdMode();
}

Check out the build targets and environment files section in their docs for more details.

PS: Here's a similar question , you might find the answers there useful too.

Answer 2

Yes, and it's actually quite convenient. Take a look at the src/environments/ directory. You have there at least 2 files, one of which is environment.ts . Do not change this one . Instead you should put your different env-related configs in other files in this directory, eg environment.prod.ts .

Everything is nicely explained in the comment put in src/environments/environment.ts :

The file contents for the current environment will overwrite these during build.

The build system defaults to the dev environment which uses environment.ts , but if you do

ng build --env=prod then environment.prod.ts will be used instead.

The list of which env maps to which file can be found in angular-cli.json .

So you just have to import the const defined in that file using a normal typescript import, eg

import { environment } from '../../environments/environment';

Then you can set it up in the service:

@Injectable()
export class SettingsService {
    public environment = environment;
}

and now you inject use such service in other places, like any other service ;)