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

前端之家收集整理的这篇文章主要介绍了不支持角度 – 异步加载指令模板UpgradeComponent前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在将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模板,但它位于不同的路径下,因此它认为需要异步获取模板,从而导致错误.

猜你在找的Angularjs相关文章