Angular：詰まったときのデバッグ

angular

ng buildでコンパイル時にエラーが出てもエラーの原因が今ひとつわからない場合があります。 そんなときはtscコマンドで怪しそうなファイルをコンパイルしてみましょう。 tscコマンドのほうが役に立つ情報をはいてくれる場合があります。

例えば、次のソースがあるとします：

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <ul class="heroes">
      <li *ngFor="let hero of heroes">
        <span class="badge">{{hero.id}}</span>{{hero.name}}
      </li>
    </ul>
  `,
  styleUrls: ['./app.component.css'],
  providers: [HeroService]
})
export class AppComponent implements OnInit {
  title = 'Tour of Heroes';
  heroes: Hero[];
  constructor( private heroService: HeroService ){ };
  ngOnInit(): void {
    this.heroes = this.heroSerice.getHeroes();
  }
}

ng buildすると次のエラーがでますが、いまひとつ、わかりません：

app.component.ts (23,24): Property 'heroSerice' does not exist on type 'AppComponent'.

次にこれをtscでコンパイルしてみます。すると：

app.component.ts(23,24): error TS2551: Property 'heroSerice' does not exist on type 'AppComponent'. Did you mean 'heroService'?

よりわかりやすいですよね！Angular/TypeScriptに熟練の人には不要かもしれませんが…