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

如何解决角树摇晃而不剥离开发代码，我应该寻找什么？

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

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

我尝试在我的应用程序中使用确切的代码，但是开发代码仍在生产版本中存在。我将代码复制到了用ng new制作的新测试应用程序中，并且在该程序中可以正常工作。

我要寻找什么东西，如何解决？这可能是因为我有Commonjs依赖项，如果是这样，我可以对此做任何事情（因为我无法删除那些依赖项）？

一些注意事项：

• angular-cli仓库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"
  }
}

解决方法

您可以应用与environment.ts相同的逻辑；创建main.prod.ts（无开发人员专用代码）和main.dev.ts（无开发人员专用代码），然后在配置中使用fileReplacements。

产品的配置为：

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

,

您链接到的帖子专门指出，摇晃发生在“ if语句中的常量控制的代码”上。因此，您可能需要将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');
  }
}

然后我运行了ng build --prod。这是在输出代码中丑陋地发出组件的构造函数的方式：

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

请注意，if条件和console.log（'C'）和console.log（'E'）不在输出中。

这是它在es5输出中的发出方式：

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

再次查看if条件以及console.log（'C'）和console.log（'E'）

因此，除非您的环境有问题，否则仅使用--prod标志进行构建即可解决该问题。

,

我们知道environment.ts文件将在prod构建期间替换为environment.prod.ts文件。您已经编写了app.component.ts条件中的else语句，这些条件将在运行时进行评估并且不会摇晃树

我想建议一种替代方法，创建两个名为lib-dev和lib-prod的库项目。 使用ng g library lib-prod和ng g library lib-dev创建库项目。 在库项目中创建所需的模块，组件和服务。确保两个库项目中的组件选择器，模块和服务名称都相同。

lib-prod和lib-dev的package.json中的

名称应该相同。

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

tsconfig.json

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

在您的app.module.ts中，使用编译的库项目。

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

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

主应用程序的package.json

{
  "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 "
  },

对于开发者， npm run start 命令将首先编译lib-dev库项目，然后运行ng serve。 它将在主应用中使用编译后的lib-dev。

对于产品， npm run build:prod 命令将首先编译lib-prod库项目，然后运行ng build --prod。

,

Angular团队成员here on GitHub回答了这个问题。答案是这是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 };
},