不支持角度 – 异步加载指令模板UpgradeComponent

2023年4月9日 227次阅读

我正在将Angular 1.6应用程序升级到Angular 4.

我正在使用UpgradeComponent将angular.module.component的组件定义升级到Angular 4.

这是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模板中使用此升级组件时,我收到错误：不支持异步加载指令模板.

This is the angular source code producing this error.

建议的方法是什么来克服这个问题？
我们所有的组件都使用外部模板.

最佳答案 在我的应用程序中,问题是由templateUrl路径是相对于代码而不是绝对(相对于项目)引起的.

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

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

点赞