Uncaught (in promise): TypeError: guard is not a function - when Class extends Another Class

Question

The same configuration that I have below was working fine just before one day and not working any more on my machine. I checked on other machine and it is still working fine on those machines. Here is what I'm doing.

App-Routing:

const routes: Routes = [
{
    path: AppRoutes.WorkflowRoute,
    canActivate: [AuthGuardService, UserConfigsService],
    data: { applicationIdentifier: ApplicationIdentifiers.Workflow, route: AppRoutes.WorkflowRoute },
    loadChildren: 'app/pages/workflowexplorer/workflowexplorer.module#WorkflowexplorerModule',
}]

UserConfig Service:(as you can see it externds DataProviderService)

@Injectable({
  providedIn: 'root'
})
export class UserConfigsService extends DataProviderService implements CanActivate {
      private controllerName: string = '/UserConfigs/';
      private userCofigs: UserCofig[];
      private userConfigsUpdatedSource = new Subject<boolean>();
      userConfigsUpdated = this.userConfigsUpdatedSource.asObservable();
      private dataSubject = new ReplaySubject<UserCofig[]>();

      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
        if (this.authService.isLoggedIn()) {
          const applicationIdentifier = route.data['applicationIdentifier'] as number;
          this.getUserConfigsForApplication(applicationIdentifier).subscribe((response) => {
            this.userCofigs = <UserCofig[]>response;
          }, error => console.log(`Error : ${error}`));
        }
        return true;
      }

DataProvider:

@Injectable({
  providedIn: 'root'
})
export class DataProviderService {
    private baseUrl: string = '';
    private apiVersion: string = '';
    private commomErrorMessage: string = 'Something went wrong please try again';

    constructor(public http: HttpClient,
        private appConfigurationService: AppConfigurationService,
        private messageDialogService: MessageDialogService,
        private spinnerService: SpinnerService,
        public authService: AuthService
    ) {
        this.baseUrl = this.appConfigurationService.getPreDefineBaseUrl();
        this.apiVersion = `v${this.appConfigurationService.getPreDefineApiVersion()}`;
    }

As shown in the error, For UserConfigsService, the guard is set as DataProvideService that doesn't implement canActivate.

Questions:

1. Is this configuration right or I'm missing anything ?

2. Can't understand why this same configuration works on other machines but mine ?

3. Anything that I should try different ?

Update:

Upon further digging into it, I found that everytime it injects UserConfigsService, DataProviderService object is returned. I'm not sure why.

AppComponent askes for UserConfigsService but gets DataProviderService.

Reproduction GitHub Link