Angular 16生产环境下隐藏API响应控制台输出的方法

核心思路 #

你的代码里用了console.debug打印API响应和错误信息，我们可以利用Angular自带的环境变量，让日志只在开发环境显示，生产环境自动关闭——既不影响开发调试，又能满足生产环境的需求。

详细步骤 #

1. 确认Angular的环境配置文件

Angular项目默认在src/environments目录下有两个环境配置文件：

• environment.ts：对应开发环境，文件内的production字段为false
• environment.prod.ts：对应生产环境，文件内的production字段为true

这两个文件会在对应环境构建时自动生效，无需手动切换。

2. 修改API服务代码，添加环境判断

首先在你的服务文件顶部导入环境变量（注意路径要匹配你的项目结构，比如服务在src/app/services/下，路径就是../../environments/environment）：

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

然后修改getShowsList方法里的日志逻辑，只有非生产环境才打印日志：

public getShowsList() {
   const url: string = `shows`;
   return this.getQuery(url).pipe(
        tap((response) => {
            // 仅开发环境打印响应日志
            if (!environment.production) {
                console.debug(response);
            }
        }),
        catchError((error) => {
            // 仅开发环境打印错误日志
            if (!environment.production) {
                console.debug(error);
            }
            return of({});
        })
    )   
}

3. 验证生产环境效果

运行生产环境构建命令：

ng build --configuration production

构建完成后，部署生成的dist目录下的代码，打开浏览器控制台就看不到API响应和错误的日志了。而开发环境下运行ng serve，日志会正常显示，完全不影响调试。

额外说明 #

Angular的生产构建会自动执行tree-shaking，也就是把environment.production为true时不会执行的代码（比如console.debug相关逻辑）从最终打包文件里移除，既实现了需求，还能减小代码体积。

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