CODEWITHSUNDEEP
javascripttypescriptangular
Petros Kyriakou
Petros Kyriakou

Reputation: 5343

TemplateUrl can't find my template

header-component

import { Component } from "angular2/core";

@Component({
    selector: "header-component",
    templateUrl: "header-template.html"

})

export class HeaderComponent {

}

main-component

import {Component} from "angular2/core";
import {bootstrap} from 'angular2/platform/browser';

// Components
import { HeaderComponent } from "./header.component";
import {ParametersForm} from './form'

@Component({
  selector: "my-app",
  directives: [ParametersForm, HeaderComponent],
  template: `
    <header-component></header-component>
    <parameters-form></parameters-form>
  `
})

class MainApp {

}

bootstrap(MainApp)
    .catch(err => console.error(err));

the problem is the header-template.html is not found

i tried the following

templateUrl: "header-template"
templateUrl: "header-template.html"
templateUrl: "./header-template.html"

yes template is in the same folder as rest of components which get imported correctly.

anyone knows the problem here?

Upvotes: 0

Views: 651

Answers (1)

basarat
basarat

Reputation: 275957

es template is in the same folder as rest of components which get imported correctly

Fix

The templateUrl will actually be the url where the file can be located once the file is loaded by the browser. You are most likely getting a 404 in the browser. See the request made there and massage it to be where you expected the file to be.

Better Fix

Use your loader to load the .html file as text content and pass that to template and don't bother with templateUrl

Upvotes: 1

Related Questions