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

Question

这看起来很简单，但我找不到任何解决方案。

那么，如何检查我的应用程序 运行 处于生产模式还是开发模式？

Answer 1

你可以使用这个功能isDevMode

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

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

注意事项：注意这个功能

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

您将获得

Error: Cannot enable prod mode after platform setup

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

Answer 2

这取决于你问什么...

如果你想知道Angular的mode，正如@yurzui所说，你需要调用{ isDevMode } from @angular/core，但它可以return false仅当您在它之前调用 enableProdMode。

如果你想知道构建环境，换句话说，如果你的应用程序运行缩小与否，你需要在你的构建系统...使用 Webpack，例如，你应该看看 definePlugin.

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

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

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

Answer 4

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

Building for production (or appending the --environment=prod flag) enables production mode Look at the CLI-generated main.ts to see how this works.

main.ts 具有以下内容：

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

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

所以检查 environment.production 看看你是否在生产中。

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

After called once, the value is locked and won't change any more... By default, this is true, unless a user calls enableProdMode before calling this.

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

Answer 5

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

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

if (isDevMode()) return 正确 false。

Answer 6

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

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

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