Angular 2相对templateUrl不起作用

Question

Creating my first Angular 2 app I'm trying to set my template in an html file using templateUrl.

At the moment, I have the component.ts and the view.html in the same folder under src/ folder and I'm using this:

@Component({
  selector: 'relative-path',
  templateUrl: 'view.html'
})

Once running the app the console say:

zone.js:1274GET http://localhost:3000/personalData.html 404 (Not Found)

Any idea what I'm doing wrong?

Answer 1

Set the moduleId , like this:

@Component({
  moduleId: module.id,
  selector: 'relative-path',
  templateUrl: 'some.component.html',
  styleUrls:  ['some.component.css']
})

For documentation, see Component-relative Paths

Answer 2

Are you sure you are putting the same name as html file name?

Ex: file name is "myView.html"

in templateUrl: 'myView.html'

Answer 3

You need to add ./ and it will work.

@Component({
  selector: 'relative-path',
  templateUrl: './view.html'
})

It's a lot easier to work with an absolute path and you will most likely never need a relative path when trying to find a template for a component if you follow the official style guide.

Answer 4

Solved!

@Component({
  selector: 'relative-path',
  template: require('view.html')
})