在Angular2中使某些组件停止生产？

对于Angular2/4中的产品构建，是否有某种方法可以在构建时省略我选择的代码的组件/部分

我有一个应用程序，它有一个我在本地使用的管理工具。我想这个管理工具离开了应用程序的生产版本。当然，我可以在每次进行产品构建时对代码进行注释，但是否有更优雅的解决方案？比如代码的某些部分上的条件构建

---

我正在寻找类似于*ngIf=“buildingForProduction”的解决方案——这方面的任何解决方案类型。它存在吗？

一个可能的解决方案是修改tsconfig.json并在排除中添加要添加的文件夹或文件

"exclude": [
  "**/*file.ts", 
  "**/*config.ts"
]

---

不幸的是，每个项目只能有一个tsconfig.json文件。如果有多个像dev、prod这样的文件，那就太好了，希望很快就能看到这个特性。希望有帮助。

基于@cyrix的答案

使用ang cli时，有一个名为environment的文件夹，默认情况下包含文件environment.prod.ts和environment.ts。如果需要，可以为不同版本添加更多内容，并相应地配置应用程序

这些文件包含如下对象：

export const environment = {
  production: false,
  myVariable: 'This variable is not included in production build'
};

当您使用

ng build --env=prod

然后ang cli将使用environment.prod.ts。如果你用

ng build

然后使用默认的environment.ts

通过将变量添加到此环境对象，您可以将其导入应用程序并读取变量。这样，您可以检查您是否在生产构建中：

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(environment.production); // Logs false for default environment
  }
  title = 'app works!';
}

---

如果您使用的是

angular cli

您可以使用

环境

文件：然后动态构建路由和模块导入，仅在环境生产时添加所有与管理相关的内容您在哪里引用此管理工具？@Maximus主应用程序导航栏有指向此管理视图的链接。最起码要做的事情是隐藏这个链接，但更安全的当然是根本不加载组件。我正在使用Bootstrap 4构建主导航。@cyrix这看起来和我要找的一模一样！谢谢如果在项目中导入和使用文件，则不会排除这些文件。此外，使用angular cli或webpack，还可以根据环境设置多个tsconfig。