AngularJS + WebStorm Tutorial 错误突出显示？

Question

我正在尝试按照此处的 Angular2 教程进行操作 https://angular.io/docs/ts/latest/tutorial/toh-pt4.html。

我遇到的问题是，即使我从教程页面复制了整个源代码，WebStorm 也会突出显示源代码，就好像有错误一样....

将指令添加到组件装饰器时，一切似乎都出错了：

@Component({
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <h2>My Heroes</h2>
    <ul class="heroes">
        <li *ngFor="let hero of heroes"
            [class.selected]="hero === selectedHero"
            (click)="onSelect(hero)">
            <span class="badge">{{hero.id}}</span> {{hero.name}}
        </li>
   </ul>
   <my-hero-detail [hero]="selectedHero"></my-hero-detail>
  `,
styles: [`
],
directives: [HeroDetailComponent],
providers: [HeroService]
})

所以毕竟 WebStorm 显示的内容是这样的：

我错过了什么？

Answer 1

@anstarovoyt

感谢您的错误评论 - 你是对的。

关注你的 link youtrack.jetbrains.com/issue/WEB-22139

我现在找到了合适的解决方法。

let HeroDetailComponent: any[] = [
    HeroDetailComponent
];

AngularJS + WebStorm Tutorial 错误突出显示？

AngularJS + WebStorm Tutorial faulty error highlighting?

webstorm

angularjs