30

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?

Draken
  • 3,134
  • 13
  • 34
  • 54
ufk
  • 30,912
  • 70
  • 235
  • 386

4 Answers4

32

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.

Gautam Krishna R
  • 2,388
  • 19
  • 26
Ahmed Musallam
  • 9,523
  • 4
  • 27
  • 47
  • 1
    thank you. unfortunately when I add to app.component.ts: "import { environment } from './environment';" and run "ng build", I get "ERROR in /.../app.component.ts (3,29): Cannot find module './environment'.". any ideas ? shouldn't it place the proper environment.ts file in the src/app directory ? – ufk Apr 06 '17 at 16:02
  • 1
    you have to use the correct relative path to the environment.ts file, just like any ts import. if `app.component.ts` is in directory `src/app/app.component.ts` and `environement.ts` is in dir `src/environments/environment.ts` then use `import { environment } from '../../environments/environment'` – Ahmed Musallam Apr 06 '17 at 16:24
  • It is important to note that the article in question is not (or no longer) correct. I summarized the details in another answer. – Conor Mancone Jul 07 '17 at 16:45
  • 1
    @AhmedMusallam : i don't want to share my env file details(like api_url, secrut_token) to git visible angular code? what i am trying to achieve is setting .env file. i have successfully done this in angularJs(https://stackoverflow.com/questions/46224986/how-to-pass-env-file-variables-to-webpack-config/46232148#46232148) . is there any better way for this angular 4? – Rameez Rami Oct 03 '17 at 06:44
  • Thank you for the link @AhmedMusallam it really explained the benefits and downsides of environment.ts files – Florinache Dec 13 '17 at 05:46
  • It worked for me import {environment} from '../../../environments/environment'; – shontauro May 22 '18 at 23:27
12

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.

Sannu
  • 1,202
  • 4
  • 21
  • 32
  • But, in angular.json by default prod overwrite dev environemnt. and we can run like ng build(for dev) and ng build --prod(for prod). how to do test? – Satish Patro Mar 21 '19 at 12:25
  • 1
    you have to supply the option for `--configuration=test`, where the configuration value (ie, `test`) matches one of your environments in the configuration section of your `angular.json` – jediwompa Jun 19 '20 at 01:07
11

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.

Conor Mancone
  • 1,940
  • 16
  • 22
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.

Mateo Tibaquira
  • 2,059
  • 22
  • 23