Angular 角度树摇动不剥离开发代码，我应该寻找什么东西？

我使用的是所有Angular相关软件包的最新版本（因此Angular 10）

我想向组件添加一些代码，但我只希望这些代码存在于dev中，而不存在于生产构建中。它需要在prod构建中完全剥离。我发现，这表明环境会自动执行此操作（因为它们是

const

）

我尝试在我的应用程序中使用该代码，但开发代码仍然存在于生产版本中。我将代码复制到我用

ng new

制作的一个新测试应用程序中，它在那里工作正常

我应该寻找什么东西，如何解决这个问题？这是否可能是因为我有CommonJS依赖项，如果有，我能做些什么吗（因为我不能删除这些依赖项）

一些注意事项：

• 已在回购协议上打开一个问题

• 环境

  对象从未写入代码库中的任何位置，我已经彻底搜索过了。（无论如何，它只在少数地方使用。）
• 如果（false）{}正确剥离，则以为边界的代码
• 从

  环境{.prod}.ts

  的末尾删除服务导出并不能解决问题
• 删除所有CommonJS依赖项并不能解决此问题

---

这里是

environment.prod.ts

（

environment.ts

是相同的，只是

false

而不是

true

）：

导出常量环境={
制作：对
};
从“./服务/服务”导出*；

下面是我正在测试的

main.ts

：

从'@angular/core'导入{enableProdMode}；
从“@angular/platformBrowserDynamic”导入{platformBrowserDynamic}；
从“environments/environment”导入{environment}；
从“./app/app.module”导入{AppModule}；
//tslint:禁用：无控制台
if（环境、生产）{
console.warn（'这是一个prod构建'）；
enableProdMode（）；
}
if（！environment.production）{
console.warn（'这是一个开发版本'）；
}
platformBrowserDynamic（）
.bootstrapModule（AppModule）
.catch（err=>console.error（err））；

以下是运行

ng build-c my prod config

后的相关输出代码：

o.X.production&&（console.warn（'这是产品构建'），Object（i.R）（），
o、 X.production | | console.warn（'这是一个开发版本'），
s、 d（）.bootstrapModule（fi）.catch（e=>console.error（e））

以下是

angular.json

的相关部分：

“我的产品配置”：{
“优化”：没错，
“输出授权”：“全部”，
“sourceMap”：false，
是的，
“namedChunks”：假，
“aot”：是的，
是的，
“vendorChunk”：假，
“buildOptimizer”：正确，
“样式预处理器选项”：{
“包含路径”：[
“src/styles”
]
},
“文件替换”：[
{
“替换”：“src/environments/environment.ts”，
“with”：“src/environments/environment.prod.ts”
}
],
“baseHref”：“/”
}

下面是

tsconfig.base.json

：

{
“保存”：false，
“编译器选项”：{
“向下迭代”：正确，
“进口者”：没错，
“模块”：“es2020”，
“outDir”：“/dist/out tsc”，
“源地图”：正确，
“声明”：虚假，
“moduleResolution”：“节点”，
“baseUrl”：“src/”，
“实验生态学者”：没错，
“allowJs”：正确，
“目标”：“es2015”，
“lib”：[
“es2018”，
“dom”
],
“路径”：{
“路径1”：[
“app/modules/stripped-from-stack-overflow-example1”
],
“路径2”：[
“app/modules/stripped-from-stack-overflow-example2”
]
}
},
“文件”：[
“src/main.ts”，
“src/polyfills.ts”
],
“角度编译器选项”：{
“fullTemplateTypeCheck”：真，
“严格模板”：正确，
“strictInjectionParameters”：true
}
}

下面是

package.json

：

{
“名称”：“我的应用程序”，
“版本”：“0.0.0”，
“许可证”：“麻省理工学院”，
“脚本”：{
“剥离部分”：“剥离部分”
},
“私人”：没错，
“依赖项”：{
“@angular/animations”：“10.0.8”，
“@angular/common”：“10.0.8”，
“@angular/compiler”：“10.0.8”，
“@angular/core”：“10.0.8”，
“@angular/forms”：“10.0.8”，
“@角度/平台浏览器”：“10.0.8”，
“@angular/platform browser dynamic”：“10.0.8”，
“@angular/router”：“10.0.8”，
“@ng idle/core”：“9.0.0-beta.1”，
“@ng idle/keepalive”：“9.0.0-beta.1”，
“@ngneat/until destroy”：“8.0.1”，
“角度svg图标”：“10.0.0”，
“大括号”：“0.11.1”，
“caniuse lite”：“1.0.30001111”，
“chart.js”：“2.9.3”，
“核心js”：“3.6.5”，
“css vars ponyfill”：“2.3.2”，
“检测浏览器”：“5.1.1”，
“元素最近的多边形填充”：“1.0.2”，
“文件保护程序”：“2.0.2”，
“模板用户界面”：“2.8.6”，
“jsonexport”：“3.0.1”，
“时刻”：“2.24.0”，
“ngx拖放”：“2.0.0”，
“rxjs”：“6.6.2”，
“tslib”：“^2.0.0”，
“roboto字体”：“0.0.75”，
“uuid”：“8.3.0”，
“zone.js”：“0.10.3”
},
“依赖性”：{
“@angular devkit/build angular”：“0.1000.5”，
“@angular/cli”：“10.0.5”，
“@angular/compiler cli”：“10.0.8”，
“@angular/语言服务”：“10.0.8”，
“@types/chart.js”：“2.7.54”，
“@types/file saver”：“2.0.1”，
“@types/uuid”：“8.0.1”，
“codelyzer”：“^6.0.0”，
“rimraf”：“3.0.2”，
“rxjs tslint规则”：“4.34.0”，
“ts节点”：“8.10.2”，
“tslint”：“6.1.3”，
“tslint角度”：“3.0.2”，
“类型脚本”：“3.9.7”，
“网页包包分析器”：“3.8.0”
}
}

您可以应用与

环境相同的逻辑；创建
main.prod.ts
（不包含特定于开发人员的代码）和
main.dev.ts
（包含特定于开发人员的代码），然后在配置中使用
fileReplacements

prod的配置为：

 "fileReplacements": [
      ...
      {
        "replace": "src/main.ts",
        "with": "src/main.prod.ts"
      }

您链接到的帖子特别指出，“if语句中由常量选通的代码”会发生树抖动。所以你可能需要一个
if (environment.production===true) {
  console.warn('this is a prod build');
  enableProdMode();
}
else    
{
  console.warn('this is a dev build');
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test1';

  constructor() {
    console.log('A');
    if (environment.production) {
      console.log('B');
    } else {
      console.log('C');
    }
    console.log('D');
    if (!environment.production) {
      console.log('E');
    } else {
      console.log('F');
    }
    console.log('G');
  }
}

{class t{constructor(){this.title="test1",console.log("A"),console.log("B"),console.log("D"),console.log("F"),console.log("G")}}

(Wu=function n(){v(this,n),this.title="test1",console.log("A"),console.log("B"),console.log("D"),console.log("F"),console.log("G")})

{
  "name": "my-lib",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^10.0.0",
    "@angular/core": "^10.0.0"
  }
}

   ....
    "paths": {
      "my-lib": [
        "dist/my-lib"
      ],
      "extension/*": [
        "dist/my-lib/*"
      ]
    }

import { MyLibModule } from "dist/my-lib";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    .....
    MyLibModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

{
  "name": "demandfarm-ngweb",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng build lib-dev && ng serve",
    ...
    "build:prod": "ng build lib-prod && ng build --prod "
  },

AytR: function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  __webpack_require__.d(__webpack_exports__, "a", function () {
    return environment;
  });
  const environment = { production: !0 };
},