【问题标题】：How to check if Angular application running in Production or Development mode如何检查 Angular 应用程序是在生产模式还是开发模式下运行
【发布时间】：2017-01-24 21:54:36
【问题描述】：

这似乎很简单，但我找不到任何解决方案。

那么，如何检查我的应用是在生产模式还是开发模式下运行？

【问题讨论】：

标签： angular production

【解决方案1】：

你可以使用这个功能isDevMode

import { isDevMode } from '@angular/core';

...
export class AppComponent { 
  constructor() {
    console.log(isDevMode());
  }
}

注意事项：小心使用此功能

if(isDevMode()) {
  enableProdMode();
}

你会得到

错误：平台设置后无法启用 prod 模式

https://github.com/angular/angular/blob/2.0.0/modules/%40angular/core/src/application_ref.ts#L58

其他选项

环境变量

import { environment } from 'src/environments/environment';

if (environment.production) {
  //
}

由 webpack process.env.NODE_ENV 变量注入

declare let process: any;
const env = process.env.NODE_ENV;

if (env  === 'production') {
  //
}

【讨论】：

我遇到了你提到的同样的错误。 “平台设置后无法启用 prod 模式”。你能帮我解决这个问题吗？ @yurzui
@Gowtham 你必须在调用platformBrowserDynamic().bootstrapModule(AppModule);之前启用它
这正是我所说的。每次我尝试在生产模式@yurzui 下运行应用程序时，我仍然会收到此错误。任何解决此问题的帮助将不胜感激。谢谢
@Gowtham 你有什么例子可以重现吗？
angular.io/api/core/isDevMode "调用一次后，值被锁定，不再变化。"答案应该包括文档和这个警告！

【解决方案2】：

这取决于您的要求...

如果你想知道Angular的mode，正如@yurzui所说，你需要调用{ isDevMode } from @angular/core，但只有在它之前调用enableProdMode才能返回false。

如果你想知道构建环境，换句话说，如果你的应用程序正在运行，你需要在你的构建系统中设置一个构建变量......使用Webpack ，例如，你应该看看definePlugin。

https://webpack.github.io/docs/list-of-plugins.html#defineplugin

new webpack.DefinePlugin({
  ENV_PRODUCTION: !!process.env.NODE_ENV
});

【讨论】：

我实际上正在寻找两者。我正在使用 webpack（通过 angular-cli），我在哪里添加你的代码行？如何访问我的打字稿文件中的该变量？如果你能更新你的答案，我会很棒
在ngcli.github.io/#getting-started-project-structure 之后，您应该编辑 webpack.config.js 然后点击我的答案中的链接...
您帖子中的链接已过时，这是Define Plugin的正确链接

【解决方案3】：

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


platformBrowserDynamic().bootstrapModule(AppModule);
enableProdMode();

这是我的代码，所以我得到了同样的错误。我只是交换了第 3 行和第 4 行。然后问题已修复。所以在启动模块之前我们应该启用 --prod 模式。

正确的可以这样放，

enableProdMode()
platformBrowserDynamic().bootstrapModule(AppModule);

【讨论】：

有趣的是，我的新 Angular 9 应用程序似乎已经将这些行（按此顺序！）放入我的“main.ts”文件中。现在好像是默认了。

【解决方案4】：

根据https://angular.io/guide/deployment#enable-production-mode 的 Angular 部署指南：

为生产而构建（或附加 --environment=prod 标志）启用 生产模式 查看 CLI 生成的 main.ts 以了解如何这行得通。

main.ts 有以下内容：

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

所以请检查environment.production，看看您是否在生产中。

您很可能不想致电isDevMode()。根据 https://angular.io/api/core/isDevMode 的 Angular API 文档：

调用一次后，值被锁定，不会再改变... 默认情况下，这是 true，除非用户在调用 this 之前调用 enableProdMode。

我发现从ng build --prod 构建调用isDevMode() 总是返回true，并且总是锁定你在开发模式下运行。相反，请检查 environment.production 以查看您是否在生产中。然后您将保持生产模式。

【讨论】：

这应该是公认的答案。（正确的文档链接和解释。）
值不会改变的事实并不意味着你不想调用它。您不应该在应用程序运行时从开发模式切换到生产模式并返回。因此，当您尝试确定是否应该启用生产模式时，环境变量是正确的选择，但如果您有一个服务需要在开发模式下表现得稍有不同，isDevMode() 非常好实现这一目标的方法。

【解决方案5】：

您应该小心检查isDevMode() 函数的返回值。

我的设置失败了，因为我正在检查是否存在：if (isDevMode) 始终是 true，即使在生产中也是如此，因为我使用 import { isDevMode } from '@angular/core'; 声明了它。

if (isDevMode()) 正确返回了false。

【讨论】：

尝试通过 Angular cli 使用 ng build --prod=true 构建您的应用
if ( isDevMode ) 仅检查标识符 isDevMode 是否已定义，不为空，不为空也不为零。由于标识符在@angular/core 中定义，if() 将始终返回 true。现在，if( isDevMode() ) 将实际调用该函数，无论是否为开发环境，它都会返回。

【解决方案6】：

只需检查环境文件中存在的生产变量，生产模式为真，开发模式为假。

import { environment } from 'src/environments/environment';

if (environment.production) {
  // for production
} else {
  // for development
}

【讨论】：