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
– Youness Houdass, Commented Jan 17, 2020 at 12:26

Marcel Hoekstra · Accepted Answer · 2020-01-17 12:35:37Z

1

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 }]

answered Jan 17, 2020 at 12:35

Marcel Hoekstra

1,48814 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Youness Houdass · Accepted Answer · 2020-01-17 12:49:17Z

0

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.

answered Jan 17, 2020 at 12:49

Youness Houdass

2044 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related