Angular QuickStart 404 for hero-search.component.html

[calonx]

In Part 6 of the Angular tutorial (https://angular.io/docs/ts/latest/tutorial/toh-pt6.html), I kept running into this 404 error about halfway through the tutorial:

...
[1] 17.04.05 10:40:49 200 GET /app/dashboard.component.html
[1] 17.04.05 10:40:49 404 GET /hero-search.component.html
[1] 17.04.05 10:40:49 304 GET /app/app.component.css
...

After checking and rechecking my code against that of the tutorial, I figured out a way to resolve the problem. In src/app/hero-search.component.ts, I added the indicated line below:

@Component({
  moduleId: module.id,                // <-- Added this line
  selector: 'hero-search',
  templateUrl: './hero-search.component.html',
  styleUrls: [ './hero-search.component.css' ],
  providers: [HeroSearchService]
})

Since it took me a good 15 minutes to find a solution to this, I figured I'd report the issue so that others hopefully will not have to flail around like I did. :)

To be clear: the code for hero-search.component.ts did not work as-is; I had to apply this fix to progress.

[Foxandxss]

We have a new systemjs loader to not having to use module.id. We will add better explanations soon.