Angular 2 Tour Of Heroes Tutorial - templateUrl does not resolve.

[SamFarrington]

I'm submitting a ... (check one with "x")

[ X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

In the section "Dashboard Top Heroes" it states to set the templateUrl on app/dashboard.component.ts to: 'dashboard.component.html'

As follows:

@Component({
    selector: 'my-dashboard',
    templateUrl: 'dashboard.component.html',
})
export class DashboardComponent {...)

This results in a 404 when trying to retrieve dashboard.component.html

Expected behavior

It seems like you need to qualify the path to the templateUrl.

The following code works without issue:

@Component({
    selector: 'my-dashboard',
    templateUrl: 'app/dashboard.component.html',
})
export class DashboardComponent {...)

Please tell us about your environment:

• Versions

package.json:

{
  "name": "tour-of-heroes",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.2",
    "typings":"^1.3.2"
  }
}

[SamFarrington]

Also hit the same issue in the "Find our way back" section on the same page. This time for the "hero-detail.component.html"

[SamFarrington]

It looks like for the relative path to work the Components need a moduleId setting.

http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

It seems like the options are to update the guide to include a moduleId or update the guide to include a full path.

Being new to Angular I don't know which of these options would be considered best practice however.

[vicen007]

I too was having this problem. In order for me to finish the tutorial, I had to keep the css and html within my TS files.

[Kilo59]

Having the same issue with both the dashboard and hero-details pages but changing the templateUrl to 'app/dashboard.component.html' doesn't fix it for me.

After inspecting the "sources" it seems like html files are just being ignored inside of the app folder.

package.json:

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "docker-build": "docker build -t ng2-quickstart .",
    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
    "pree2e": "npm run webdriver:update",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "postinstall": "typings install",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "webdriver:update": "webdriver-manager update"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "~2.0.1",
    "@angular/compiler":  "~2.0.1",
    "@angular/core":  "~2.0.1",
    "@angular/forms": "~2.0.1",
    "@angular/http":  "~2.0.1",
    "@angular/platform-browser":  "~2.0.1",
    "@angular/platform-browser-dynamic":  "~2.0.1",
    "@angular/router":  "~3.0.1",
    "@angular/upgrade":  "~2.0.1",

    "angular-in-memory-web-api": "~0.1.1",
    "bootstrap": "^3.3.7",
    "systemjs": "0.19.39",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings": "^1.4.0",

    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.15.1",
    "lodash": "^4.16.2",
    "jasmine-core": "~2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-htmlfile-reporter": "^0.3.4",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.4"
  },
  "repository": {}
}

[timxzz]

After changed the url path, should also add moduleId: module.id, in the @Component section, this issue is fixed in merge request #2477

[Foxandxss]

You need to use module.id indeed.

I am going to update the tutorial so it gets clear that you have to use it and how.

[asantiago323]

@SamFarrington I do not know if the tutorial was edited after the bug was written, but it seems like you forgot to place a "./" before your template location, hence why using "app/" worked for you. The "./" tells the app to search within the same folder for the document.

@Component({ moduleId: module.id, selector: 'my-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'] })

[sir4ur0n]

@asantiago323 Even with "./" this doesn't work, I just tested.

Speaking of which, I am surprised this ticket is closed. Today https://angular.io/docs/ts/latest/tutorial/toh-pt5.html still doesn't mention this moduleId: module.id, as far as I can tell, and the problem persists.

[Foxandxss]

We made a change recently to eliminate the moduleId need. We added a loader that will translate ./urls into absolute/urls/links.html

[sir4ur0n]

Then shouldn't the tutorial work? :( It doesn't right now, or I missed some important piece. It seems to work with moduleId though.

[Foxandxss]

Yes, of course. Show me your error and the code so we can debug it together.

[sir4ur0n]

All problems happen using https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

1. The "live example" doesn't work. It gets stuck on "Loading...":
   

2. With the downloadable example, after npm install (no error) and npm start I get GET http://localhost:3000/systemjs-angular-loader.js 404 (Not Found). In the npm logs I see this: [1] 17.03.19 16:58:39 404 GET /systemjs-angular-loader.js.

3. When following manual steps of tutorial, on step 5, at Dashboard Top Heroes section (the very first time templateUrl is mentioned), the extraction of the template into dashboard.component.html doesn't work, I get this error: GET http://localhost:3002/dashboard.component.html 404 (Not Found)

// app/dashboard.component.ts
import {Component, OnInit} from "@angular/core";
import {Hero} from "./hero";
import {HeroService} from "./hero.service";

@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnInit {

  heroes: Hero[];

  constructor(private heroService: HeroService) {
  }

  ngOnInit(): void {
    this.heroService.getHeroes()
    .then(heroes => this.heroes = heroes.slice(1, 5));
  }
}

// app/dashboard.component.html
<h3>Top Heroes</h3>
<div class="grid grid-pad">
  <div *ngFor="let hero of heroes" class="col-1-4">
    <div class="module hero">
      <h4>{{hero.name}}</h4>
    </div>
  </div>
</div>