Как проверить, работает ли приложение Angular в режиме производства или разработки

132

Это кажется простым, но я не смог найти никакого решения.

Итак, как мне проверить, работает ли мое приложение в рабочем режиме или в режиме разработки?

maxbellec
источник

Ответы:

200

Вы можете использовать эту функцию 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
источник
Я получаю ту же ошибку, о которой вы говорили. «Не удается включить режим продакшена после настройки платформы». Не могли бы вы помочь мне решить эту проблему? @yurzui
Gowtham
@Gowtham Вы должны включить его перед platformBrowserDynamic().bootstrapModule(AppModule);
звонком
Именно так я это называю. Тем не менее, я получаю эту ошибку каждый раз, когда пытаюсь запустить приложение в производственном режиме @yurzui. Любая помощь в разрешении этого вопроса будет принята с благодарностью. Спасибо
Gowtham
@Gowtham У вас есть пример, чтобы воспроизвести это?
yurzui
2
angular.io/api/core/isDevMode «После однократного вызова значение блокируется и больше не меняется». Ответ должен включать документ и это предупреждение!
jasie
39

Согласно руководству по развертыванию 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

это зависит от того, о чем вы спрашиваете ...

Если вы хотите узнать modeоб Angular, как сказал @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
});
Hitmands
источник
Я действительно искал обоих. Я использую webpack (через angular-cli), где мне добавить ваши строки кода? Как мне получить доступ к этой переменной в моих файлах машинописного текста? Было бы здорово, если бы вы могли обновить свой ответ этим
maxbellec
Следуя этой ngcli.github.io/#getting-started-project-structure, вам следует отредактировать файл webpack.config.js, а затем перейти по ссылке в моем ответе ...
Hitmands
Ссылка в вашем сообщении устарела, вот правильная для Define Plugin
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». Вроде сейчас по умолчанию.
Майк Гледхилл,
1

Будьте осторожны, проверяя возвращаемое значение isDevMode()функции.

Моя установка не удалась, потому что я проверял наличие: if (isDevMode)всегда true, даже в производстве, потому что я заявил об этом с помощью import { isDevMode } from '@angular/core';.

if (isDevMode())вернулся falseправильно.

Spikolynn
источник
попробуйте создать ваше приложение с ng build --prod=trueпомощью angular
cli
if ( isDevMode )только проверяет, определен ли идентификатор isDevMode , а не ноль, не пустой и не ноль. Поскольку идентификатор был определен в @angular/coreтом, что if () всегда будет возвращать true . Теперь if( isDevMode() )фактически вызовет функцию, и она вернется, если это среда разработки или нет.
WPomier
1

Просто проверьте производственную переменную, присутствующую в файле среды, она будет верна для производственного режима и ложна для разработки.

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

if (environment.production) {
  // for production
} else {
  // for development
}
Джасмит Сингх
источник