How to use isDevMode() inside of our NgModule Decorator? Currently says "Value at position X in the NgModule.imports of AppModule is not a reference"

Question

I just liked to know how can I use a function that returns a boolean in my NgModule Decorator? My project is on Angular 16.

This is my app.module.ts:

import { NgModule, isDevMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    isDevMode() ? StoreDevtoolsModule.instrument() : [],  // <- This is what makes my code to throw error!
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And this is the error I'm getting:

Value at position 2 in the NgModule.imports of AppModule is not a reference
  Value could not be determined statically.(-991010)
app.module.ts(15, 5): Unable to evaluate this expression statically.
app.module.ts(15, 5): A value for 'isDevMode' cannot be determined statically, as it is an external declaration.
(alias) isDevMode(): boolean
import isDevMode
Returns whether Angular is in development mode.

By default, this is true, unless enableProdMode is invoked prior to calling this method or the application is built using the Angular CLI with the optimization option.

Answer 1

You can't use isDevMode() directly because the compiler is not able to determine its return value at compile time.

You best alternative is likely to rely on environment files :

import { environment } from 'src/environments/environment';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

export const storeDevToolsImport = [
    !environment.production ? StoreDevtoolsModule.instrument() : []
];