在开发 Angular 应用程序时，我们经常需要在开发、测试和生产环境之间进行切换。为了简化这个过程，我们可以使用 angular-environment 这个 npm 包。它允许我们轻松管理应用程序的环境，并在不同环境下使用不同的 URL、API 密钥和其他配置。
安装和配置
要使用 angular-environment，首先需要安装这个包。可以使用以下命令在你的 Angular 项目中添加这个依赖项：
npm install angular-environment --save
安装完毕后，在 src/environments 文件夹中创建三个环境配置文件：
environment.ts：用于开发环境environment.prod.ts：用于生产环境environment.test.ts：用于测试环境
每个环境中都需要包含相应的配置，例如：API URL、Google 分析跟踪 ID、Firebase 密钥等。以下是这三个文件的示例代码：
environment.ts
-- -------------------- ---- ------- ------ ----- ----------- - - ----------- ------ ------- ------------------------ ------------------ ----------------- --------- - ------- ------ ----------- ------ ------------ ------ ---------- ------ -------------- ------ ------------------ ----- - --展开代码
environment.prod.ts
-- -------------------- ---- ------- ------ ----- ----------- - - ----------- ----- ------- --------------------------- ------------------ ----------------- --------- - ------- ------ ----------- ------ ------------ ------ ---------- ------ -------------- ------ ------------------ ----- - --展开代码
environment.test.ts
-- -------------------- ---- ------- ------ ----- ----------- - - ----------- ------ ------- -------------------------------- ------------------ ----------------- --------- - ------- ------ ----------- ------ ------------ ------ ---------- ------ -------------- ------ ------------------ ----- - --展开代码
集成 Angular 环境
现在我们已经创建了不同环境的配置文件，接下来我们需要在我们的 Angular 应用程序中使用这些配置。为此，我们需要进行以下步骤：
1. 基本设置
首先，我们需要在 main.ts 中导入我们的环境文件，并根据环境变量加载相应的配置。以下是示例代码：
import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));
2. 使用配置
使用 angular-environment，我们可以从环境配置中获取需要的配置。要使用 angular-environment，首先需要在 app.module.ts 中导入 NgEnvModule，然后使用 NgEnvService 来获取我们需要的配置。以下是示例代码：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ ------------ - ---- ---------------------- ------ - ------------ - ---- ------------------ ------ - ---------- - ---- ---------------- ----------- ------------- - ------------ -- -------- - -------------- --------------------- -- ---------- - ----------- - -------- ---------- ----------- ------------ ------------- -- ------------------------- ----- -------------- - -- ---------- -------------- -- ------ ----- --------- - -展开代码
在上面的代码中，我们使用 provide 和 useFactory 来提供一个名为 API_URL 的依赖项。我们将 NgEnvService 作为参数传入 useFactory，然后使用 envService.get('apiUrl') 从环境配置中获取 API URL。
要访问 API_URL，我们可以在我们的组件中注入它。以下是示例代码：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- ----------- --------- - --- --- ---- -- ------ -- ---- - -- ------ ----- ------------ - ------------------------------ ------ ------- ------- - - -展开代码
使用示例
以上代码可能已经足够用来使用 angular-environment，但它并不表明如何使用它。下面，我们将举一个实际的示例来演示如何使用 angular-environment。
首先，假设我们有一个名为 ApiService 的服务，它用于获取数据。我们需要将 ApiService 的 API URL 从配置文件中获取。以下是示例代码：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------ - ---------- - ---- ------- ------ - ----------- - ---- ------------------------------ ------------- ----------- ------ -- ------ ----- ---------- - ------------------- ----- ----------- - - ----------- ------------------ - ----- ------ - ------------------- ------ ----------------------------------------- - -展开代码
在上面的代码中，我们从 environment 对象中获取 apiUrl 属性，并将它作为我们 API 的基 URL。注意我们在此处也可以直接使用 envService.get('apiUrl') 来获取 API URL。
现在，我们在我们的组件中使用 ApiService 来获取数据。以下是示例代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------- - ---- ---------------- ------ - ---- - ---- --------------- ------------ --------- ----------- --------- - -------------- ---- --- ----------- ---- -- ------- -- --------- -- ----- ----- - -- ------ ----- ------------ - ------ ------- ------------------- ---- ----------- - - ---------- - ----------------------------------- -- ---------- - ------- - -展开代码
在上面的代码中，我们注入了 ApiService，并在 ngOnInit() 中使用它来获取数据。在订阅了 Observable 后，我们将返回的 items 赋值给 this.items，然后使用 ngFor 显示它们。
现在，我们可以使用以下命令在开发模式下启动应用程序：
ng serve在开发模式下，我们使用的是 environment.ts 中的配置文件，它使用 http://localhost:3000 作为 API URL。
如果我们想在生产模式下启动应用程序，我们可以使用以下命令：
ng build --prod && ng serve
在生产模式下，我们将使用 environment.prod.ts 中的配置文件，它使用 https://api.mydomain.com 作为 API URL。
如果我们想在测试模式下启动应用程序，我们可以使用以下命令：
ng serve --configuration test
在测试模式下，我们将使用 environment.test.ts 中的配置文件，它使用 https://api.test.mydomain.com 作为 API URL。
总结
angular-environment 可以使我们轻松管理我们的 Angular 应用程序的环境。它允许我们在不同环境下使用不同的 URL、API 密钥和其他配置。在本文中，我们了解了如何使用它，并在实际示例中演示了它的用法。通过使用 angular-environment，我们可以让我们的应用数从开发到生产无缝切换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/185270
