Question

测试组件时我遇到了一个奇怪的错误。该组件作为我的应用程序的一部分工作正常。但经过测试，它说我的组件声明了两个属性：'template'和'templateUrl'，但它只定义了'template'。

所有三个组件的模板都使用overrideTemplate()方法覆盖。组件<home-aside>和<home-product list>属于同一模块。前者使用template，后者templateUrl。当从描述的组件中排除后者及其TestBed时，错误就会消失。

我的组件的正文：

import { Component } from '@angular/core';
import { Subscription }   from 'rxjs/Subscription';

import { HomeService,
    ProductInterface,
    SubcategoryEntryInterface } from './home.service';


@Component({
selector: 'home',
template: `
    <div class="home__container">
        <home-aside></home-aside>
        <div class="abstract-list__container">

            <h1 class="section-h2 text-center">
                <span *ngIf="!productItems && !subcategoryEntries">Choose goods category or subcategory</span>
                <span *ngIf="subcategoryEntries && !productItems">Now choose between subcategories</span>
                <span *ngIf="productItems">Subcategory product items:</span>
            </h1>

            <ul class="home__subentries-list" *ngIf="subcategoryEntries && !productItems">
                <li *ngFor="let item of subcategoryEntries">
                    <a (click)="showProducts(item.ID)">{{item.subcategory_entry_name}}</a>
                </li>
            </ul>

            <home-product-list *ngIf="productItems" [items]="productItems">
                <h3 *ngIf="!productItems.length" class="text-center">Sorry, this subcategory contains no goods now.
                </h3>
            </home-product-list>

        </div>

    </div>
`
})

export class HomeComponent {

productItems:                           ProductInterface[];
subcategoryEntries:                     SubcategoryEntryInterface[];

private productItemsSubscription:       Subscription;
private subcategoryEntriesSubscription: Subscription;

constructor(private homeService: HomeService) {

    this.subcategoryEntriesSubscription = this.homeService.gotSubcategoryEnries$
        .subscribe((items: SubcategoryEntryInterface[]) => {
            this.productItems       = null;
            this.subcategoryEntries = items;
        });

    this.productItemsSubscription = this.homeService.gotProducts$
        .subscribe((items: ProductInterface[]) => {
            this.productItems = items;
        });
}


showProducts(id: string) {
    this.homeService.getProducts(id);
}


ngOnDestroy() {
        this.productItemsSubscription       &&    
this.productItemsSubscription.unsubscribe();
        this.subcategoryEntriesSubscription &&         this.subcategoryEntriesSubscription.unsubscribe();
}

}

HomeProductList组件的代码：

import { Component, ElementRef }    from '@angular/core';
import { AbstractListComponent }    from '../shared/abstract-list.component';
import { HomeService }              from './home.service';

@Component({
    selector:       'home-product-list',
    templateUrl:    'app/modules/shared/abstract-list.html'
})
export class HomeProductListComponent extends AbstractListComponent {
    constructor(
        private elementRef: ElementRef,
        private homeService: HomeService,
    ) {
        super(elementRef, {} as any);
    }

    runService(id: string) {
        this.homeService.navigateToProductDetails(id);
    }
}

一些软件包的实际版本：'@ angular'系列 - 4.3.5，'zone.js' - 0.8.16，'typescript' - 2.4.2，'karma' - 1.7.0。所有依赖项今天都已更新，但错误仍然存在。我的'package.json'：

{
  "dependencies": {
    "@angular/animations": "~4.3.0",
    "@angular/common": "~4.3.0",
    "@angular/compiler": "~4.3.0",
    "@angular/core": "~4.3.0",
    "@angular/forms": "~4.3.0",
    "@angular/http": "~4.3.0",
    "@angular/platform-browser": "~4.3.0",
    "@angular/platform-browser-dynamic": "~4.3.0",
    "@angular/platform-server": "~4.3.0",
    "@angular/router": "~4.3.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "~5",
    "systemjs": "~0.20.14",
    "zone.js": "~0.8.5"
  },
  "devDependencies": {
    "@types/jasmine": "~2.5.36",
    "concurrently": "~3.5.0",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "~4.0.0",
    "gulp-postcss": "~7.0.0",
    "gulp-sass": "~3.1.0",
    "jasmine": "~2.7.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage": "~1.1.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "~0.2.2",
    "karma-opera-launcher": "~1.0.0",
    "lite-server": "~2.3.0",
    "remap-istanbul": "~0.9.5",
    "tslint": "~5",
    "typescript": "~2.4.0"
  }
}

完整的错误消息在这里：

zone.js:195 Uncaught Error: 'HomeProductListComponent' component cannot define both template and templateUrl
Zone.runTask @ zone.js:195
ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:1829
setTimeout (async)
scheduleTask @ zone.js:1839
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:235
Zone.scheduleMacroTask @ zone.js:258
(anonymous) @ zone.js:1865
proto.(anonymous function) @ zone.js:1227
(anonymous) @ debug.js:20
window.__karma__.result @ debug.js:23
KarmaReporter.specDone @ adapter.js:252
dispatch @ jasmine.js:4140
(anonymous) @ jasmine.js:4111
specResultCallback @ jasmine.js:1081
complete @ jasmine.js:493
ZoneDelegate.invokeTask @ zone.js:424
Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:595
Promise resolved (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:413
Zone.scheduleTask @ zone.js:235
Zone.scheduleMicroTask @ zone.js:255
(anonymous) @ jasmine-patch.js:114
(anonymous) @ jasmine.js:4005
channel.port1.onmessage @ jasmine.js:1645

Angular 2 Tesing - 错误：组件无法定义模板和templateUrl

0 个答案: