Question

我将Angular 1.6应用程序升级到Angular 4 我使用angular.module.component将组件UpgradeComponent升级为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模板中使用此升级组件时，我收到错误：loading directive templates asynchronously is not supported。

This is the angular source code producing this error

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

Answer 1

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

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

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

Answer 2

在从angularJs 1.7升级到Angular 9时，我遇到了相同的问题。要解决此问题，我将 template 更改为 templateUrl 。 angularJS组件文件。

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

2 个答案: