角2とVisual Studioの更新3のテンプレート解析エラー

Question

私は、Packt PublishingのASP.NET Core and Angular 2に従います。第3章では、作成者はItemListComponentとItemDetailComponentを作成します。 ItemDetailComponentを使用すると、テンプレートの解析エラーが発生します。

ItemDetailComponent：

import {Component, Input} from "@angular/core"; 
import {Item} from "./item"; 
@Component({ 
selector: "item-detail", 
template: ` 
<div *ngIf="item" class="item-details"> 
<h2>{{item.Title}} - Detail View</h2> 
<ul> 
<li> 
<label>Title:</label> 
<input [(ngModel)]="item.Title" placeholder="Insert the 
title..."/> 
</li> 
<li> 
<label>Description:</label> 
<textarea [(ngModel)]="item.Description" 
placeholder="Insert a suitable description..."></textarea> 
</li> 
</ul> 
</div> 
`, 
styles: [` 
.item-details { 
margin: 5px; 
padding: 5px 10px; 
border: 1px solid black; 
background-color: #dddddd; 
width: 300px; 
} 
.item-details * { 
vertical-align: middle; 
} 
.item-details ul li { 
padding: 5px 0; 
} 
`] 
}) 
export class ItemDetailComponent { 
@Input("item") item: Item; 
} 

ItemListComponent：

：

import { Component, OnInit, Input } from '@angular/core'; 
import { Item } from './item'; 
import { ItemService } from './item.service'; 
@Component({ 
selector: `item-list`, 
template: ` 
    <h2>{{title}}:</h2> 
    <ul class="items"> 
     <li *ngFor="let item of items" [class.selected]="item === selectedItem" (click)="onSelect(item)"> 
      <span>{{item.Title}}</span>    
     </li> 
    </ul> 
    <item-detail *ngIf="selectedItem" [item]="selectedItem"></item-detail> 

`, 
styles: [` 
    ul.items li { 
     cursor: pointer; 
    } 
    ul.items li.selected { 
     background-color: #cccccc; 
    } 
`] 
}) 
export class ItemListComponent implements OnInit 
{ 
@Input() class_name: string; 
title: string; 
selectedItem: Item; 
items: Item[]; 
errorMessage: string; 

constructor(private itemService: ItemService) { 

} 

ngOnInit() { 
    console.log("ItemListComponent instantiated with the following type: " + this.class_name); 
    var s = null; 
    switch (this.class_name) { 
     case "latest": 
     default: 
      this.title = "Latest Items"; 
      s = this.itemService.getLatest(); 
      break; 
     case "most-viewed": 
      this.title = "Most Viewed Items"; 
      s = this.itemService.getMostViewed(); 
      break; 
     case "random": 
      this.title = "Random Items"; 
      s = this.itemService.getRandom(); 
      break; 
    } 
    s.subscribe(
     items => this.items = items, 
     error => this.errorMessage = <any>error 
    ); 
    //this.getLatest(); 
} 

getLatest() { 
    this.itemService.getLatest() 
     .subscribe(
     latestItems => this.items = latestItems, 
     error => this.errorMessage = <any>error 
     ); 
} 

onSelect(item: Item) { 
    this.selectedItem = item; 
    console.log("item with Id " + this.selectedItem.Id + " has been selected."); 
} 
} 

を私はDemoInputと呼ばれる別の単純なコンポーネントを作成し、以下のエラー以下

Template parse errors: 
Can't bind to 'item' since it isn't a known property of 'item-detail'. 
1. If 'item-detail' is an Angular component and it has 'item' input, then verify that it is part of this module. 
2. If 'item-detail' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. 
(" 
     </li> 
    </ul> 
    <item-detail *ngIf="selectedItem" [ERROR ->][item]="selectedItem"></item-detail> 

は私が書いたコードです

import { Component, Input } from '@angular/core'; 
@Component({ 
selector: "demo-input", 
template: `<h1>{{title_name}}</h1>` 
}) 
export class DemoInput 
{ 
@Input("in_name") title_name: string; 
} 

また、in_nameはデモ入力の既知のプロパティではないという同じエラーが表示されます。

私はMac上で実行中の仮想マシンにVisual Studio 2015にアップデート3を使用しています

app.component.ts

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

@Component({ 
selector: 'opengamelist', 
template: `<h1>{{title}}</h1> 
      <item-list class_name="latest" class="latest"></item-list> 
      <!--<item-list class_name="most-viewed" class="most-viewed">   </item-list>--> 
      <!--<item-list class_name="random" class="random"></item-list>--> 
      <!--<demo-input [in_name]="title"></demo-input>-->`, 
styles: [` 
     item-list { 
      min-width: 332px; 
      border: 1px solid #aaaaaa; 
      display: inline-block; 
      margin: 0 10px; 
      padding: 10px; 
     } 
     item-list.latest { 
      background-color: #f9f9f9; 
     } 
     item-list.most-viewed { 
      background-color: #f0f0f0; 
     } 
     item-list.random { 
      background-color: #e9e9e9; 
     } 
    `] 
}) 
export class AppComponent { 
title:string = "Open Game List" 
} 

app.module.ts

///<reference path="../../typings/index.d.ts"/> 
import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { FormsModule } from "@angular/forms"; 
import { RouterModule } from "@angular/router"; 
import "rxjs/Rx"; 

import { AppComponent } from './app.component'; 
import { ItemListComponent } from './item-list.component'; 
import { ItemService } from './item.service'; 
import { ItemDetailComponent } from './item-detail.component'; 
import { DemoInput } from './DemoInput'; 

@NgModule({ 
declarations: [AppComponent, ItemListComponent, ItemDetailComponent,  DemoInput], 
imports: [BrowserModule, HttpModule, FormsModule, RouterModule], 
providers: [ItemService], 
bootstrap: [AppComponent] 
}) 
export class AppModule 
{ 

} 

。私はAngular 2をインストールして、Mac上に同じDemoInputコンポーネントを作成しようとしました。これはMacで正常に動作します。

これはVisual Studio 2015の問題ですか。私は何をしていますか。 ItemListComponentテンプレートからitem-detailタグを削除すると、すべて正常に動作します。

誰でも私に解決策を与えることができます。事前に

感謝:)

Answer 1

あなたは本の中で指定された/ビルドまったく同じAngular2のバージョンを使用していますか？そうでない場合は、あなたが使っていることを教えてください：私はRC5でこのエラーを取得していません。

私はまた、公式のGitHubのリポジトリからの本のソースコードを取得しようとするお勧め：

https://github.com/PacktPublishing/ASPdotNET-Core-and-Angular-2

各章/本セクションは、独自のソリューションファイルを持っている：あなたは第3章である - パート1 。サイドノートとして

：ItemDetailComponent実装は、第3章（第3章 - パート2）で後に交換されることを考慮：あなたはあなたの問題に適した修正を把握していない場合、あなたはおそらく、そのサンプルの実装をスキップすることができ更新されたItemDetailComponentに直進してください。