使用angular-cli在angular4应用程序中正确使用environment.ts

Question

我使用Intellij Ultimate来编写我的angular 4应用程序.

我创建了一个新的Angular 4项目,它包含environment.ts并且environment.prod.ts环境已正确配置angular-cli.json.

如何在我的代码中导入它？实际上,当我构建它时,我说明要使用哪个环境.它是如何工作的？我需要用Intellij编译一些东西吗？

我尝试使用Google搜索并在人们实际导入特定的environment.ts文件时找到了许多示例.但那不好,对吧？因为它将使用相同的environment.ts文件,即使我为不同的环境构建.

我该怎么办？

Answer 1

这是一篇关于带有角度cli的环境文件的非常好的文章:http: //tattoocoder.com/angular-cli-using-the-environment-option/

总之,您已导入,environment.ts但将根据环境导入正确的文件.如本文所述,angular cli将负责处理.

Answer 2

我有同样的问题,并找到了@Ahmed发布的同一篇文章.但是,这并没有解决我的问题:我刚刚得到:

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

我正在使用通过创建的构建ng new,因此如果您正在使用最新的角度客户端,您可能会遇到同样的问题.正如@Ahmed在评论他的答案时所说的那样,重要的是要让相对路径正确.ng cli的(当前)版本将您的主要应用程序组件放在此处:

projectFolder/app/src/app.component.ts

它将环境文件放在这里:

projectFolder/app/environments/environment.ts

因此,在app.component中包含环境的正确行是:

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

小"特征":environment.ts实际上是开发环境的环境配置文件.但是,在运行时(由于ng build命令或ng serve命令),此文件将被实际环境状态替换.因此,即使您明确包含开发环境文件,但在运行时,您将获得适用于您的环境的环境变量.这对我来说似乎很奇怪,但它确实有效,而且看起来这就是设计工作的方式.

Answer 3

我有很多麻烦让这个工作.试图遵循这么多的教程,ng服务只是没有在开发环境之外拾取任何东西.我终于能够使用以下方法:

.angular-cli.json文件

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

环境文件,在./src和以下文件夹结构下

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

environment.ts文件:

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

environment.test.ts文件

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

environment.prod.ts文件

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

**不要在src下创建另一个environment.ts文件.

app.module.ts或您要使用环境属性的任何其他组件.请记住从../environments文件夹导入环境. 我错误地遵循了一个教程并在src文件夹下创建了environment.ts,这对我来说不起作用.

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

希望这可以帮助.

顺便说一句,我用Angular 5做了这个.