在 Angular2 中将一些组件排除在生产之外？

Question

有没有什么方法可以在构建时省略我选择的组件/部分代码，以便在 Angular2/4 中进行生产构建？

我有一个应用程序，其中包含我在本地使用的管理工具。我希望这个管理工具不在应用程序的生产版本中。我可以 - 当然 - 每次我进行生产构建时评论代码，但有没有更优雅的解决方案？就像在代码的某些部分进行条件构建一样？

我正在寻找类似 *ngIf="buildingForProduction" 类型的解决方案，以解决这个方向的任何问题。存在吗？

Answer 1

根据@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!';
}

Answer 2

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

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

不幸的是，每个项目只能有一个 tsconfig.json 文件，如果有多个类似 dev、prod 的文件会很好，希望很快能看到这个功能 https://github.com/Microsoft/TypeScript/issues/3645。希望对您有所帮助。