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

Question

我正在使用最新版本的所有角相关的软件包(所以角10)。

我想向组件中添加一些代码，但我只希望这些代码存在于dev中，而不是在产品构建中。它需要在prod构建中被完全剥离。我找到了这句话，这表明环境会自动执行此操作(因为它们是const)。

我试着在我的应用程序中使用这段代码，但是开发代码仍然存在于生产构建中。我把代码复制到了我用ng new制作的一个新的测试应用程序中，它在那里确实正常工作。

我应该找什么东西，我怎么解决这个问题？这可能是因为我有CommonJS依赖关系吗?如果是的话，我能做些什么(因为我不能删除这些依赖项)吗？

一些注意事项：

• 一个问题已经打开角-cli回购这里。
• 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

这个问题是由一个有角的团队成员在GitHub上回答的。答案是，这是Webpack问题--如果将环境文件导入多个输出文件，Webpack就无法对其进行适当的优化。我已经为后人贴上了下面的全部回复。

如果没有复制，就很难分辨出决定性的原因。但是，一个潜在的原因是在多个生成的输出文件中使用了环境JS模块( environment . is /environment.prod.ts)。如果在主代码中使用环境模块，在延迟路由的代码中使用环境模块，则情况可能是这样。当发生这种情况时，Webpack不能将环境模块与主模块连接起来(就像在新项目中所发生的那样)，因为环境模块需要被两个不同的输出模块访问。这反过来又阻止优化器内联生产属性值，因为环境对象现在本质上是来自另一个模块的导入，而不是局部变量。 当出现这种情况时，代码类似于以下代码(它表示单独的Webpack模块)，则应该在应用程序的主输出文件中结束： AytR:函数(模块、__webpack_exports__、__webpack_require__) {“使用严格”；__webpack_require__.d(__webpack_exports__，"a"，函数() {返回环境；})；const环境={ production：!0 }；}，

Answer 2

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

prod的配置应该是：

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

Answer 3

链接到的帖子特别指出，树的抖动发生在“if语句中的常量设置的代码”中。因此，您可能需要将if语句更改为：

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

引入一个常数的存在。