如何配置Angular4 TypeScript文件环境及多环境API访问？

一、配置多环境API端点 & TypeScript环境基础设置 #

1. 改造环境配置文件 #

Angular CLI 默认已经提供了多环境的基础支持，你只需要在 src/environments 目录下新增对应环境的配置文件就行：

• environment.ts：开发环境（默认使用）
• environment.prod.ts：生产环境
• 还可以按需新增，比如 environment.staging.ts 用于测试/预发布环境

每个文件里直接定义你的API端点变量，示例如下：

// environment.ts（开发环境）
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

// environment.prod.ts（生产环境）
export const environment = {
  production: true,
  apiUrl: 'https://your-production-domain/api'
};

2. 配置Angular CLI的环境映射 #

打开项目根目录的 angular.json（旧版CLI是 angular-cli.json），找到 configurations 节点，给每个环境配置对应的文件替换规则：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    // 其他生产环境专属配置...
  },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ]
  }
}

3. 在TypeScript代码中使用环境变量 #

在你的服务或组件里导入环境配置，直接调用API地址即可：

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

// 比如在HTTP请求中使用
this.http.get(`${environment.apiUrl}/users`).subscribe(response => {
  // 处理返回数据
});

4. TypeScript基础环境确认 #

首次部署前，检查根目录的 tsconfig.json 确保基础配置适配部署环境：

• target：设置为 es5 兼容更多老旧浏览器，或 es6 针对现代浏览器
• module：保持 esnext 或 commonjs 配合Angular的打包逻辑
• lib：包含 es2018、dom 等，确保TypeScript能识别浏览器端API

二、能否使用Virtual-PC部署？ #

当然可以！虚拟机和物理机的部署流程完全一致，只需要在虚拟机里完成以下步骤：

• 安装Node.js和Angular CLI（执行 npm install -g @angular/cli）
• 克隆你的项目代码，进入目录执行 npm install 安装所有依赖
• 根据需要构建对应环境的包：生产环境用 ng build --configuration production，测试环境用 ng build --configuration staging
• 把构建好的 dist 目录下的文件，部署到虚拟机里的Web服务器（比如IIS、Nginx、Apache）即可

三、TypeScript文件读取web.config的数据库连接信息？ #

这里要重点提醒：前端代码（TypeScript编译后的JS）运行在浏览器里，无法直接读取服务器端的web.config文件，而且数据库连接字符串属于敏感信息，绝对不能暴露给前端！

推荐的正确做法是：

1. 后端封装统一的API接口，前端只调用这些接口获取业务数据，完全不接触数据库连接信息
2. 如果确实需要从服务器获取非敏感配置项，可以这样操作：
   • 后端写一个专门的接口，返回需要的配置内容（务必过滤敏感信息），前端通过HTTP请求获取
   • 或者在部署时，把配置注入到 index.html 的全局变量中：

     <!-- 在index.html的<head>中添加 -->
     <script>
       window.appConfig = {
         apiUrl: 'https://your-domain/api'
         // 绝对不要在这里存放数据库连接字符串！
       };
     </script>
     

     然后在TypeScript里通过全局变量访问（先声明类型避免报错）：

     declare var window: any;
     const apiUrl = window.appConfig.apiUrl;
     

内容的提问来源于stack exchange，提问作者user9495407