Disable component if environment angular is production

Question

I have something like this

enviroment.ts

export const environment = {
  production: false
};

And in app.module.ts

I have something like this

@NgModule({
  declarations: [AppComponent, VersionComponent],
  imports: [],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

The problem I have is that based on environment.production i need to declare or not to declare VersionComponent

Something like this

if (environment.production) {VersionComponent}

The problem is that if is not allowed declarations , has someone had similar problem?

Answer 1

Module metadata is consumed by the angular compiler, which only supports subset of JavaScript . Fortunately, that subset includes the conditional and spread operators, allowing us to write:

declarations: [
  AppComponent,
  ...(environment.production ? [VersionComponent] : []),
],

Or course, this may cause syntax errors if any templates make use of the undefined component ...

Alternatively, you could replace the component with a different definition that has the same selector, but doesn't do anything:

declarations: [
  AppComponent,
  environment.production ? VersionComponent : VersionComponentStub,
],

Answer 2

const declarations =  [AppComponent];
let extraDeclarations = [];
if(environment.production) {
    extraDeclarations = [VersionComponent]
}

const finalDeclarations = declarations.concat(extraDeclarations);
@NgModule({
    declarations: finalDeclarations

Answer 3

const _declarations = [AppComponent];

if( environment.production )
   _declarations.push( VersionComponent );

@NgModule({
  declarations: [
    _declarations
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

works for me ;)