templateUrl does not work for me

问题

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 and I get into troubles. The working code is:

import {Component, View} from 'angular2/core';
@Component({
       selector: 'my-app',
       template: '<h1>Angular2</h1>',
       directives: []
})
export class AppComponent {
       constructor() {  
       }
}

Then I change the template to templateUrl like so:

templateUrl: 'app.component.html',

where I have in this file the exact same code as before

<h1>Angular2</h1>

Seems to be obvious to work but it does not. It does not spit errors but it does not display anything except the 'loading....' message as in the get started demo

Thanks for helping

Peter

回答1:

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

回答2:

You have to write path from the build path.

templateUrl: 'build/app.component.html'

回答3:

Give the path from the root directory.

回答4:

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:

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

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

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

回答5:

use full path like app/app.component.html or use absolute path like ./app.component.html ./ for same directory

回答6:

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'
})

回答7:

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

来源：https://stackoverflow.com/questions/34844206/templateurl-does-not-work-for-me

标签

angular

angular2-template