在 Angular 项目开发中，我们通常需要对应多个环境，例如开发、测试、生产环境等，而每一个环境都可能有不同的 API 地址、配置项、第三方库等。在这种情况下，如何进行环境切换和配置管理就变得至关重要。本文将介绍 Angular 项目的环境配置及多环境切换，希望能够为大家提供一些参考。
1. 环境配置
在 Angular 项目中，环境的配置信息都保存在 environments 文件夹中，其中 environments 文件夹默认包含两个文件：environment.ts 和 environment.prod.ts，分别代表开发环境和生产环境。
environment.ts 的内容如下：
------ ----- ----------- - - ----------- ------ ------- --------------------------- --
environment.prod.ts 的内容如下：
------ ----- ----------- - - ----------- ----- ------- ------------------------- --
以上代码中，production 代表是否是生产环境，apiUrl 则代表相应的 API 地址。在实际开发中，我们可以根据需要添加或修改其他配置项，如第三方库的版本号等。
2. 多环境切换
在 Angular 项目中，我们可以使用 Angular CLI 提供的 --configuration 选项来切换环境。默认情况下，Angular CLI 支持三种环境：dev、prod 和 test。
使用命令 ng build --configuration=prod 可以编译生产环境的代码，使用命令 ng build --configuration=test 可以编译测试环境的代码。如果需要支持更多的环境，则需要进行一些额外的配置。
2.1 添加自定义环境
如果需要添加一个名为 staging 的环境，则需要在 angular.json 文件中修改配置。
首先，打开 angular.json 文件，找到 "configurations" 字段，将 "staging" 添加到 "configurations" 中，如下所示：
----------------- -
---------- -
------------------- -
-
---------- ----------------------------------
------- -----------------------------------------
-
--
--------------- -----
---------------- ------
------------ ------
------------- -----
-------------- ------
------ -----
------------------ -----
-------------- ------
----------------- -----
---------- -
-
------- ----------
----------------- ------
--------------- -----
-
-
-
-以上配置中，"fileReplacements" 字段代表文件替换规则，这里将 environment.ts 替换为 environment.staging.ts。"budgets" 字段代表代码体积限制，可以根据需要进行修改。
接下来，在 environments 文件夹下创建 environment.staging.ts 文件，内容可以与 environment.prod.ts 相同，也可以根据需要进行修改，如下所示：
------ ----- ----------- - - ----------- ----- ------- --------------------------------- --
现在，就可以使用命令 ng build --configuration=staging 来编译 staging 环境的代码了。
2.2 添加自定义命令
如果需要频繁地进行环境切换，则可以在 package.json 文件中添加自定义命令。打开 package.json 文件，找到 "scripts" 字段，添加以下代码：
---------- - ------------- --- ----- ---------------------- ---------------- --- ----- ------------------------- ------------- --- ----- --------------------- -
以上配置中，"build:prod"、"build:staging" 和 "build:test" 分别代表编译生产环境、staging 环境和测试环境的代码。现在就可以使用 npm run build:staging 命令来编译 staging 环境的代码了。
3. 环境变量
除了在编译时进行环境切换外，我们还可以在运行时根据环境变量进行切换。Angular CLI 提供了一种方便的方式来读取环境变量，我们可以在代码中直接读取该变量，从而对应不同的环境。
首先，在根目录下创建一个名为 .env 的文件，内容可以如下所示：
-------------------------------
以上配置中，API_URL 对应生产环境的 API 地址。
然后，在 environment.ts 文件中添加以下代码：
------ ----- ----------- - - ----------- ------ ------- ------------------- --
以上代码中，通过改变 apiUrl 的值，可以实现在不同的环境中使用不同的 API 地址。
接下来，需要在项目中安装一个名为 dotenv 的包，这个包可以读取 .env 文件中的变量，并将其注入到环境变量中。使用命令 npm install dotenv，将其安装到项目中。
最后，在 main.ts 文件的开头添加以下代码：
------ ----------------
以上代码意味着可以在应用程序运行时读取环境变量。
4. 示例代码
最后，附上一份完整的示例代码，方便大家参考和使用。该示例代码支持三种环境：dev、prod 和 staging。
4.1 angular.json
----------------- -
------ -
------------------- -
-
---------- ----------------------------------
------- -------------------------------------
-
-
--
------- -
------------------- -
-
---------- ----------------------------------
------- --------------------------------------
-
-
--
---------- -
------------------- -
-
---------- ----------------------------------
------- -----------------------------------------
-
-
-
-4.2 environments/environment.dev.ts
------ ----- ----------- - - ----------- ------ ------- --------------------------- --
4.3 environments/environment.prod.ts
------ ----- ----------- - - ----------- ----- ------- ------------------------- --
4.4 environments/environment.staging.ts
------ ----- ----------- - - ----------- ----- ------- --------------------------------- --
4.5 package.json
---------- - ------------ --- ----- --------------------- ------------- --- ----- ---------------------- ---------------- --- ----- ------------------------ -
4.6 .env
-------------------------------
4.7 app.component.ts
------ - --------- - ---- ---------------- ------ - ----------- - ---- ------------------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ----- - ---------- ------ - ------------------- -
以上代码中，通过引入 environment 文件，我们可以获取当前环境的 apiUrl，并注入到组件中供使用。在实际开发中，该 apiUrl 可以用于发起 API 请求等。
5. 结论
本文介绍了 Angular 项目的环境配置及多环境切换，包括环境配置、多环境切换、环境变量等方面的内容，并附带了完整的示例代码。通过使用这些技术，我们可以更加高效地进行 Angular 项目的开发、测试和部署，为团队带来更大的价值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6715b34dad1e889fe21880bc