不支持异步加载指令模板

Question

我正在将Angular 1.6应用程序升级到Angular4。
我正在将使用的组件define升级angular.module.component到Angular 4 UpgradeComponent。

这是Angular 1.6组件的定义

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

这是升级组件的定义

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);
    }
}

问题是，当我在Angular 4模板中使用此升级组件时，出现错误：loading directive templates asynchronously is not supported。

这是产生此错误的有角度的源代码。

解决该问题的建议方法是什么？
我们所有的组件都使用外部模板。

Answer 1

在我的应用程序中，问题是由 templateUrl 路径相对于代码而不是绝对路径（相对于项目）引起的。

module.component(...)我一次性添加了该部分和 UpgradeComponent，因为 ngJS 组件最初是直接路由到的。当我这样做时，我使用了 ng4 编写 templateUrls 的常用方式，其中路径相对于代码，而不是旧的 ngJS 方式，其中 templateUrls 往往相对于项目根目录。

因此，在运行时，Angular 通过一个路径在其缓存中查找 HTML 模板，但它位于不同的路径下，因此它认为需要异步获取模板，从而导致错误。