Properly using environment.ts in my angular4 appli

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

Environments wasn't working for me with @angular/cli 1.2.4, but they did load Ok with 1.3.2, so be sure you use the latest version of the series.

Answer 2

I had this same question, and found the same article that @Ahmed posted. However, that didn't fix my problem: I just got:

ERROR in XXX/src/app/app.component.ts (19,29): Cannot find module './environment'.

I'm working with a build created via ng new, so if you are working with the latest angular client you will likely have the same problem I had. As @Ahmed states in his comment on his answer, it is important that you get the relative path correct. The (current) version of the ng cli puts your main application component here:

projectFolder/app/src/app.component.ts

And it places the environment file here:

projectFolder/app/environments/environment.ts

Therefore, the correct line to include the environment from inside your app.component is this:

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

Small "feature": environment.ts is actually the environment configuration file for the development environment. However, at run time (either due to the ng build command or ng serve command), this file will be replaced by whatever the actual environment states. So even though you are explicitly including the development environment file, at run time you will get the environment variables for whatever your environment is. It seems strange to me, but it works, and it seems like that is how it is designed to work.

Answer 3

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 4

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.