loading directive templates asynchronously is not supported UpgradeComponent

Question

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.

Answer 1

In my app the issue was caused by the templateUrl path being relative-to-code instead of absolute (relative-to-project).

I had added the module.component(...) part along with the UpgradeComponent in one go, since the ngJS component was originally routed to directly. When I did so, I used the ng4 usual way of writing templateUrls, where the path is relative to the code, rather than the old ngJS way where templateUrls tend to be relative to the project root.

Hence at runtime angular is looking in its cache for an HTML template by one path but it's in there under a different path, so it thinks it needs to get the template async-ly, causing the error.