Configurable module creation with IVY and AOT on

[vdshb]

🐞 bug report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

No

Description

I want to create configurable Angular 9 module with IVY and AOT on.
In the simplest scenario it must provide a single stateful service configurable by name:

@Injectable()
export class CounterService {
  private counter = 0;
  shot() {
    return this.counter++;
  }
}

@NgModule()
export class CounterModule {
  static withConfig(name: string): ModuleWithProviders {
    return {
      ngModule: CounterModule,
      providers: [{
        provide: name,
        useClass: CounterService
      }]
    };
  }
}

Everything works fine at this point. But if I want to add any logic into CounterModule.withConfig:

@NgModule()
export class CounterModule {
  static withConfig(name?: string): ModuleWithProviders {
    const counterProviderToken = name ? name : CounterService;
    return {
      ngModule: CounterModule,
      providers: [{
        provide: counterProviderToken,
        useClass: CounterService
      }]
    };
  }
}

I'm getting a compilation error NG1010.

🔬 Minimal Reproduction

https://github.com/vdshb/ng-modules-problem

Please, check out the last commit. It adds code to get compilation exception.

🔥 Exception or Error

error NG1010: Value at position 1 in the NgModule.imports of AppModule is not a reference: [object Object]

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.0
Node: 13.12.0
OS: linux x64

Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.42.0

Anything else relevant?
I'm not sure if it's a bug or we have any other ways to make a configurable module.

It might be related to this ticket: #36243 but the cases are different.

Everithyng works fine with option projects.ng-modules-shots.architect.build.options.aot=false set in angular.json

[JoostK]

There's currently a constraint that there's only a single statement in the function. So if you restructure your code to this effect, it will work.

@NgModule()
export class CounterModule {
  static withConfig(name?: string): ModuleWithProviders {
    return {
      ngModule: CounterModule,
      providers: [{
        provide: name ? name : CounterService;,
        useClass: CounterService
      }]
    };
  }
}

[vdshb]

Thanks! Knowing this constraint I've managed a module with multiple configuration arguments to work.
It looks filthy and not the way I wanted, but it works.

[JoostK]

@vdshb You can pull out the organization of providers into a function, if you wish:

@NgModule()
export class CounterModule {
  static withConfig(name?: string): ModuleWithProviders {
    return {
      ngModule: CounterModule,
      providers: createProviders(name),
    };
  }
}

function createProviders(name?: string): Provider[] {
  const counterProviderToken = name ? name : CounterService;
  return [{
    provide: counterProviderToken,
    useClass: CounterService
  }];
}

[vdshb]

Thanks a lot! Module looks way better now.

[JoostK]

Actually I will reopen this as I think this is rather arbitrary. At least the error message should be improved.