Conditional Module imports (e.g. for development only)

🚀 Conditional Module imports (e.g. for development-only modules)

Relevant Package

This feature request is for @angular/core / ivy

Description

View Engine allowed us to pass a module conditionally, which was useful as some modules should only be imported in development. Example:

@NgModule({
  imports: [
    process.env.NODE_ENV === 'development' ? NgxsReduxDevtoolsPluginModule.forRoot({})  : undefined
  ]
})

Using Ivy, the above solution will fail when building with production target. Running ng serve xxx --prod leads to these errors: CLI will show lots of misguiding errors (telling me component xxx is not a known element). Browser console will show “ASSERTION ERROR: Type passed in is not NgModuleType, it does not have ‘ɵmod’ property.”

I thought Ivy might not like the undefined value, so I tried this as a workaround:

@NgModule()
export class NoopModule {}

@NgModule({
  imports: [
    process.env.NODE_ENV === 'development' ? NgxsReduxDevtoolsPluginModule.forRoot({})  : NoopModule 
  ]
})

… which lead to the same errors.

Describe the solution you’d like

Does Ivy support this by now, in way I don’t know? if not, I suggest to allow to pass undefined to module imports.

[jbjhjm]

ok there is one important thing!!

One MUST NOT pass undefined into imports list under any circumstances.

This will fail during production build with Error Unexpected value 'undefined' imported by the module ...

imports: [
	environment.BUILD_MODE==='development' ? MyDevOnlyModule : undefined
],

But if you pass in an empty array as @alxhub does in his example above, it will work.

imports: [
	environment.BUILD_MODE==='development' ? MyDevOnlyModule : []
],

So examples and issues mentioned above might be due to dynamic environment. But the environment may also actually be analyzed correctly and the “undefined” value might be source of the problem.

[JoostK]

@LanderBeeuwsaert Angular 12 supports that particular use-case using the new BrowserAnimationsModule.withConfig API.