Question

我使用Intellij Ultimate来编写我的角度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文件夹下创建了环境。这对我来说无效。

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

希望这有帮助。

顺便说一句，我是用Angular 5做的。

Answer 4

使用@angular/cli 1.2.4环境并不适合我，但是他们确实加载了1.3.2，所以请务必使用该系列的最新版本。

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

4 个答案: