Default values config using forRoot works in Dev but not in Prod (Aot)

Question

The following code works fine in Dev, but not in Prod mode:

Module

export class SpinnerModule {
  static forRoot(config?: SpinnerConfig): ModuleWithProviders {
    return {
      ngModule: SpinnerModule,
      providers: [SpinnerService, { provide: SpinnerConfigToken, useValue: { ...DEFAULT_CONFIG, ...config } }]
    };
  }
}

Config Token

export const SpinnerConfigToken = new InjectionToken<SpinnerConfig>('SPINNER CONFIG TOKEN');

Model

// Project imports
import { Color, SpinnerAnimation } from '../../../models';

export interface SpinnerConfig {
  label?: string;
  color?: Color;
  animation?: SpinnerAnimation;
}

export const DEFAULT_CONFIG: SpinnerConfig = {
  label: '',
  color: Color.Blue,
  animation: SpinnerAnimation.DoubleBounce
};

Component

export class SpinnerComponent implements OnInit {
  @Input() isLoading: boolean;
  @Input() label: string;
  @Input() color: Color;
  @Input() animation: SpinnerAnimation;

  isFullScreen: boolean;
  spinnerAnimation: typeof SpinnerAnimation;

  constructor(@Inject(SpinnerConfigToken) private config: SpinnerConfig) {
    this.spinnerAnimation = SpinnerAnimation;
  }

  ngOnInit(): void {
    this.isLoading = !!this.isLoading;
    this.color = this.color || this.config.color;
    this.label = this.label || this.config.label;
    this.animation = this.animation || this.config.animation;

App module

@NgModule({
  imports: [
    ...
    SpinnerModule.forRoot({
      label: 'Loading, please wait ...'
    })
  ],
 ...
})
export class AppModule {}

I would like to merge the given config with what I've set as default values. what I've did works great in Dev, but in Prod, I've no errors, but the values are undefined, looks like the spread operator for merging the two object doesn't work,

Thanks a lot.

I was able to make it work using useFactory, but I believe it's so much extra code for a small functionality, any idea how to make it work only with useValue or maybe a little trick in the same context? — Youness Houdass, Jan 17 '20 at 12:26

score 1 · Answer 1 · answered Jan 17 '20 at 12:35

You should create function to get at woring with an aot build.

export function DefaultConfig(config: HttpClient) {
  return ({ ...DEFAULT_CONFIG, ...config })
}

and:

providers: [SpinnerService, { provide: SpinnerConfigToken, useFactory: DefaultConfig }]

score 0 · Answer 2 · answered Jan 17 '20 at 12:49

Thanks Marcel, I was able to resolve it by using useFactory as I've said in comments, like this:

providers: [
   ToastService,
   { provide: ToastConfigToken, useValue: config },
   { provide: ToastConfigService, useFactory: defaultConfig, deps: [ToastConfigToken] }
]

export function defaultConfig(config: ToastConfig): any {
  return ({ ...DEFAULT_CONFIG, ...config })
}

But I would like something more simplier than using the two useValue and useFactory for a very basic functionality.

Default values config using forRoot works in Dev but not in Prod (Aot)

2 Answers2