Angular 6 AOT issue - can't pass function as argument

Question

I'm unable to pass a function as an argument to a base class from a child class when trying to build using ng build --prod. The build works fine without the --prod flag, which looks to indicate an issue with AOT. The error I get is:

ERROR in : Can't resolve all parameters for AppGridComponent in /src/app/components/core/shared/app-grid.component.ts: (?, [object Object])

I found this SO thread which has several different answers for solutions, but I haven't been able to get any to work. It appears that AOT wants to inject this argument as a service and can't resolve (which I don't need since I am passing the function as a value from the child).

Base Class - app-grid.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { GlobalsService } from '../../../services/globals.service';

@Component({})
export class AppGridComponent implements OnInit, OnDestroy {

  constructor(protected loadDataCallBack: any, protected globalsService: GlobalsService) {
  }

  ngOnInit() {
    this.init();
  }

  // get api data
  public init() {
    this.loadDataCallBack()
      .subscribe(result => result);
  }

Child class - rules.component.ts

const loadApiData = function() {
  return this.productRuleService.get();
};

@Component({
  selector: 'app-rules',
  template: `<div class="grid-wrapper">Data here...</div>`
})
export class RulesComponent extends AppGridComponent implements OnInit, OnDestroy {
  constructor(protected globalsService: GlobalsService, protected productRuleService: ProductRelationshipRuleService) {
    super(loadApiData, globalsService);
  }

Any suggestions on how to get this to build would be appreciated.

score 0 · Accepted Answer · answered Dec 03 '18 at 15:18

I was able to get this to work by creating a class that extends Function and then using this class as the provider in the component.

// Base Class - app-grid.component.ts
export class LoadDataCallBack extends Function {
}
@Component({
  template: '',
  providers: [{provide: LoadDataCallBack, useValue: () => {}}]
})

This ultimately satisfied the compiler and it is able to identify the type to inject into the first argument: loadDataCallBack.

Angular 6 AOT issue - can't pass function as argument

1 Answers1