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

发布时间：2020-12-17 17:10:07 所属栏目：安全来源：网络整理

导读：我正在将Angular 1.6应用程序升级到Angular 4. 我正在使用UpgradeComponent将angular.module.component的组件定义升级到Angular 4. 这是Angular 1.6组件定义 module.component('my-comp',{ bindings: { configuration: '=',name: '=?' },templateUrl: 'templ

我正在将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模板,但它位于不同的路径下,因此它认为需要异步获取模板,从而导致错误.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!