loading directive templates asynchronously is not supported UpgradeComponent

I'm upgrading Angular 1.6 application to Angular 4.
I'm upgrading a component define with angular.module.component to Angular 4 using UpgradeComponent.

This is the Angular 1.6 component definition

module.component('my-comp', {
        bindings: {
            configuration: '=',
            name: '=?'
        },
        templateUrl: 'templates/my-comp.template.html',
        controller: 'myCompController',
        controllerAs: 'myComp',
        bindToController: true
    }
);

This is the upgrade component defintion

import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

@Directive({
    selector: 'my-comp'
})
export class MyCompDirective extends UpgradeComponent {
    constructor(elementRef: ElementRef, injector: Injector) {
        super('myComp', elementRef, injector);
    }
}

The problem is when I use this upgrade component in Angular 4 template I'm getting the error: loading directive templates asynchronously is not supported.

This is the angular source code producing this error.

What is the suggested way to overcome this issue?
All of our components are using external templates.