如何检查Angular应用程序是否在生产或开发模式下运行


131

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

那么,如何检查我的应用程序是在生产模式还是在开发模式下运行?

Answers:


198

您可以使用此功能isDevMode

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

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

注意事项:请谨慎使用此功能

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

你会得到

错误:平台设置后无法启用产品模式

其他选择

环境变量

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') {
  //
}

我收到与您提到的相同的错误。“在平台设置后无法启用产品模式”。您能帮我解决这个问题吗?@yurzui
Gowtham

@Gowtham您必须在致电前启用它platformBrowserDynamic().bootstrapModule(AppModule);
yurzui

这就是我所说的。每次尝试以生产模式@yurzui运行应用程序时,仍然会收到此错误。解决这个问题的任何帮助将不胜感激。谢谢
Gowtham '17

@Gowtham你有复制的例子吗?
yurzui

2
“ angular.io/api/core/isDevMode ”调用一次后,该值将被锁定,将不再更改。“ 答案应包括文档和此警告!
jasie

38

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

为生产而构建(或附加--environment = prod标志)将启用生产模式。查看生成的CLI main.ts以查看其工作方式。

main.ts 具有以下内容:

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

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

因此environment.production,请检查您是否正在生产中。

最有可能您不想打电话isDevMode()。根据Angular API文档https://angular.io/api/core/isDevMode

一次调用后,该值将被锁定,并且不会再更改...默认情况下,这是正确的,除非用户在调用此方法之前调用enableProdMode。

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


2
这应该是公认的答案。(正确的文档链接和说明。)
jasie

1
值不会改变的事实并不意味着您不想调用它。在您的应用程序运行时,您不应该从开发模式切换到生产模式,然后再切换回生产模式。因此,当您尝试确定是否应该启用生产模式时,使用环境变量是正确的方法,但是如果您拥有的服务需要在开发模式下工作时有所不同,isDevMode()则这是一种完美的方法那。
StriplingWarrior

4

这取决于您的要求...

如果您想了解modeAngular的知识(如@yurzui所说),则需要调用{ isDevMode } from @angular/core它,但false只有enableProdMode在它之前调用才能返回。

如果您想了解构建环境,换句话说,如果您的应用程序是否运行在最小化状态,则需要在构建系统中设置一个构建变量... Webpack例如,应使用definePlugin

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

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

我实际上正在寻找两者。我正在使用webpack(通过angular-cli),在哪里添加代码行?如何在打字稿文件中访问该变量?如果您可以用它来更新您的答案,我会很好
maxbellec

遵循此ngcli.github.io/#getting-started-project-structure之后,您应该编辑webpack.config.js,然后按照我的答案中的链接...
Hitmands

在您的文章的链接已经过时,继承人一个正确的定义插件
HostMyBus

2
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);

1
有趣的是,我的新Angular 9应用程序似乎已经将这些行(按此顺序!)放入了我的“ main.ts”文件中。现在似乎是默认设置。
Mike Gledhill

1

您应谨慎检查isDevMode()函数的返回值。

我的设置失败是因为我正在检查存在性:if (isDevMode)总是true,甚至在生产中,因为我用声明了它import { isDevMode } from '@angular/core';

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


尝试ng build --prod=true通过angular cli 构建您的应用
Sathish Kumar kk

if ( isDevMode )仅检查标识符isDevMode是否已定义,不为null,不为空也不为零。由于标识符是在@angular/core其中定义的,因此if()将始终返回true。现在,if( isDevMode() )实际上将调用该函数,并且无论是否处于开发环境中,它都将返回。
WPomier

1

只需检查环境文件中存在的生产变量,则对于生产模式为true,对于开发为false。

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

if (environment.production) {
  // for production
} else {
  // for development
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.