Angular 11升15后ng serve生成生产编译版，如何生成可调试版本？

一、恢复可调试的开发模式编译 #

你的angular.json配置中，build的默认options开启了aot: true，Angular 12+默认开发环境启用AOT，但如果想要回到类似Angular 11的易调试体验，或者确保开发模式完全禁用生产级优化，可按以下步骤调整：

1. 修改angular.json的build配置
   在build的options中添加开发模式关键配置，确保关闭优化、保留sourceMap和命名chunk：

   "build": {
     "builder": "@angular-devkit/build-angular:browser",
     "options": {
       // 原有配置不变，新增以下内容
       "optimization": false,
       "sourceMap": true,
       "namedChunks": true,
       "vendorChunk": true
     },
     // 原有production配置保持不变
   }
   

   或者，你可以新增专门的development配置项，让serve默认使用该配置：

   "build": {
     // 原有options和production配置不变
     "configurations": {
       "production": { /* 原有内容 */ },
       "development": {
         "optimization": false,
         "sourceMap": true,
         "namedChunks": true,
         "vendorChunk": true
       }
     }
   },
   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "browserTarget": "selfmanager3:build:development"
     },
     // 原有production配置保持不变
   }
   

2. 确认环境变量配置
   检查src/environments/environment.ts中的production值是否为false：

   export const environment = {
     production: false
   };
   

   确保ng serve时不会加载生产环境配置文件。

3. 命令行强制指定开发模式
   如果配置调整后仍有问题，可直接在命令行指定开发模式运行：

   ng serve --configuration development
   

   或者关闭AOT编译，回到JIT模式：

   ng serve --aot false
   

二、解决代码中debugg内容被排除的问题 #

你提到的debugg代码被排除，可能由以下原因导致，对应解决方法如下：

1. Tree-shaking移除未使用代码
   如果debugg是未被引用的变量或函数，AOT编译会自动移除未使用代码。确保你的debugg代码被实际调用，或者在tsconfig.json中关闭相关检查：

   "compilerOptions": {
     // 原有配置不变，新增以下内容
     "noUnusedLocals": false,
     "noUnusedParameters": false
   }
   

2. TSLint规则拦截
   你的项目使用了TSLint，检查是否有规则会移除调试代码。若存在tslint.json文件，临时禁用相关规则：

   "rules": {
     "no-debugger": false,
     "no-console": false
   }
   

3. 关闭开发模式下的构建优化
   在build的options中添加配置，禁用buildOptimizer：

   "build": {
     "options": {
       // 原有配置不变，新增以下内容
       "buildOptimizer": false
     }
   }
   

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