templateUrl does not work for me

Question

I use the seed structure as per angular.io get started project. Everything OK so far.

Now I wanted to change the top component to have a view from a separated file a

Answer 1

The issue here seems absolute path. The compnent is requiring absolute path to be mentioned. This is my file structure,

The following is not working,

@Component({
    selector: 'pm-products',
    templateUrl: 'product-list.component.html',
    styleUrls: ['product-list.component.css']
})

As of my knowledge, The HTML template Url or the Url for the style-sheet needs to be given in absolute path. I tried the following and working.

@Component({
    selector: 'pm-products',
    //template: `<h3>PRODUCT LISTINGS </h3>`
    templateUrl:'app/products/product-list.component.html'
})

Answer 2

If you work with your 'main' component, you may use (absolute path):

'./your_component_name.html'  

in your case:

'./app.component.html',

If other component - you have couple of choices:

1. as said before - use moduleId
2. use /app/your_component_html_filename like example /app/dashboard.html or ./app/dashboard.html
3. use full path - not a good idea, but you may

About using of .css NOT from your 'main' component:

2. use app/your_component_css_filename like example app/dashboard.css without first slash '/'!!!

Answer 3

In my case i resolved this issue by adding moduleid property of component

@Component({
    moduleId: module.id,
    selector: 'my-app',
    // templateUrl: './app/app.component.html'
    templateUrl:'app.component.html'
})

and it works as expected. And i get some idea from this url :
https://www.youtube.com/watch?v=WAPQF_GA7Qg&feature=youtu.be

Answer 4

Add moduleId: module.id in the @Component decorator. If you don't have that then Angular 2 will be looking for your files at the root level.

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  moduleId: module.id,
  templateUrl: 'app.component.html'
})

export class AppComponent { }  

Check this article

Answer 5

You have to write path from the build path.

templateUrl: 'build/app.component.html'

Answer 6

Give the path from the root directory.