Properly using environment.ts in my angular4 application with angular-cli

Question

I use Intellij Ultimate to code my angular 4 application.

I created a new Angular 4 project, it contains environment.ts and environment.prod.ts and the environments are properly configured in angular-cli.json.

how do I import it in my code? Since actually when I build it I state which environment to use. How does it work? Do I need to compile something with Intellij?

I tried googling and found many examples when people actually imported a specific environment.ts file. but that's not good, right? Since it will use the same environment.ts file even if I build for a different environment.

What do I do?

Answer 1

Here is a really good article on environment files with angular cli: http://tattoocoder.com/angular-cli-using-the-environment-option/

In summary, you do imported environment.ts but the correct file will be imported depending on what environment it is. angular cli will take care of that as explained in the article.

Answer 2

I had lot of trouble getting this to work. Tried to follow so many tutorials, ng serve just didn't pickup anything outside of dev environment. I was finally able to make it work with following:

.angular-cli.json file

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

Environment files, under ./src and following folder structure

./environments |--environment.ts |--environment.test.ts |--environment.prod.ts |--environment.dev.ts 

environment.ts file:

    export const environment = {         production: false,         apiBase: 'http://dev-server:4200/app/',         env: 'dev'     }; 

environment.test.ts file

    export const environment = {         production: false,         apiBase: 'http://test-server:2080/app/',         env: 'test'     }; 

environment.prod.ts file

    export const environment = {         production: true,         apiBase: 'http://prod-server:2080/app/',         env: 'prod'     }; 

**Do not create another environment.ts file under src.

app.module.ts or any other components where you want to use the environment properties. Remember to import environment from ../environments folder. I made a mistake of following a tutorial and creating environment.ts under src folder which did not work for me.

import { environment } from '../environments/environment'; export class AppModule {     constructor() {        console.log('Base Api :' + environment.apiBase +             ' production? ' +  environment.production +             ' env: ' + environment.env);     } } 

Hope this helps.

By the way, i did this with Angular 5.