Angular 树抖动不剥离开发代码，我应该寻找什么？

Question

我正在使用所有与 Angular 相关的软件包的最新版本（所以是 Angular 10）。

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

我尝试在我的应用程序中使用该确切代码，但开发代码仍在生产版本中。我将代码复制到我用 制作的新测试应用程序中ng new，它确实在那里正常工作。

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

一些注意事项：

• 已在 angular-cli repo here上打开了一个问题。
• 该environment对象从未写入代码库中的任何地方，我已经进行了彻底的搜索。（无论如何它只在少数地方使用。）
• 以if (false) { }为界的代码被正确剥离。
• 从末尾删除服务导出environment{.prod}.ts并不能解决问题。
• 删除所有 CommonJS 依赖项并不能解决问题。

---

这是environment.prod.ts(environment.ts是相同的，只是用false而不是true)：

export const environment = {
  production: true
};

export * from './services/services';

这main.ts是我正在测试的：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from 'environments/environment';
import { AppModule } from './app/app.module';

// tslint:disable:no-console

if (environment.production) {
  console.warn('this is a prod build');
  enableProdMode();
}

if (!environment.production) {
  console.warn('this is a dev build');
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

这是运行后的相关输出代码ng build -c my-prod-config：

o.X.production && (console.warn('this is a prod build'), Object(i.R) ()),
o.X.production || console.warn('this is a dev build'),
s.d().bootstrapModule(fi).catch (e=>console.error(e))

这是的相关部分angular.json：

"my-prod-config": {
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "stylePreprocessorOptions": {
    "includePaths": [
      "src/styles"
    ]
  },
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "baseHref": "./"
}

这是tsconfig.base.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "baseUrl": "src/",
    "experimentalDecorators": true,
    "allowJs": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "path1": [
        "app/modules/stripped-from-stack-overflow-example1"
      ],
      "path2": [
        "app/modules/stripped-from-stack-overflow-example2"
      ]
    }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    "strictInjectionParameters": true
  }
}

这是package.json：

{
  "name": "my-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "section stripped": "section stripped"
  },
  "private": true,
  "dependencies": {
    "@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",
    "@angular/platform-browser": "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",
    "angular-svg-icon": "10.0.0",
    "brace": "0.11.1",
    "caniuse-lite": "1.0.30001111",
    "chart.js": "2.9.3",
    "core-js": "3.6.5",
    "css-vars-ponyfill": "2.3.2",
    "detect-browser": "5.1.1",
    "element-closest-polyfill": "1.0.2",
    "file-saver": "2.0.2",
    "fomantic-ui": "2.8.6",
    "jsonexport": "3.0.1",
    "moment": "2.24.0",
    "ngx-drag-drop": "2.0.0",
    "rxjs": "6.6.2",
    "tslib": "^2.0.0",
    "typeface-roboto": "0.0.75",
    "uuid": "8.3.0",
    "zone.js": "0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.1000.5",
    "@angular/cli": "10.0.5",
    "@angular/compiler-cli": "10.0.8",
    "@angular/language-service": "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-rules": "4.34.0",
    "ts-node": "8.10.2",
    "tslint": "6.1.3",
    "tslint-angular": "3.0.2",
    "typescript": "3.9.7",
    "webpack-bundle-analyzer": "3.8.0"
  }
}

Answer 1

您可以应用与environment.ts;相同的逻辑。创建main.prod.ts（没有特定于开发的代码）和main.dev.ts（有特定于开发的代码），然后fileReplacements在您的配置中使用。

prod 的配置是：

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

Answer 2

GitHub 上的Angular 团队成员回答了这个问题。答案是，这是一个 Webpack 问题——如果将环境文件导入到多个输出文件中，那么 Webpack 无法对其进行正确优化。我已将完整的回复粘贴在下面以供后代使用。

如果没有再现，就很难辨别确切的原因。然而，一个潜在的原因是在多个生成的输出文件中使用了环境 JS 模块 (environment.ts/environment.prod.ts)。如果在主代码和延迟路由的代码中使用环境模块，则可能会出现这种情况。发生这种情况时，Webpack 无法将环境模块与主模块连接起来（如在新项目中发生的情况），因为环境模块需要可供两个不同的输出模块访问。这反过来又阻止优化器内联生产属性值，因为环境对象现在本质上是从另一个模块导入的，而不是本地变量。

当发生这种情况时，类似于以下的代码（代表一个单独的 Webpack 模块）应该最终出现在应用程序的主输出文件中：

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