HTML5 Video WebVTT File not loading - Angular2

Question

I'm trying to load a .vtt file to show chapters in a video but it doesn't seem to be loading. I'm working in Angular2 and currently working locally (localhost).

This is my component html:

<video #vid autoplay loop style="width:300px; height:200px">
  <source src="/video/dust_01.mov">
  <track #chapters kind="subtitles" src="/video/chapters.vtt" label="Chapters" srclang="en">
</video>

Then in my component i'm checking the chapters with:

@ViewChild('chapters') chapters: ElementRef;
@ViewChild('vid') vid: ElementRef;

ngAfterViewInit() {
   console.log('display chapters');
   console.log(this.chapters);
   console.log(this.vid);
}

And my vtt file is a simple one taken from an example I found online (I modified the times since my video is only a second long):

WEBVTT

00:00.100 --> 00:00.300
<v Roger Bingham>We are in New York City

00:00.600 --> 00:00.900
<v Roger Bingham>We’re actually at the Lucern Hotel, just down the street

00:01.000 --> 00:01.800
<v Roger Bingham>from the American Museum of Natural History

If I check the console, the textTrack cues are empty..