TemplateUrl does not work for me

Question

I use the seed structure according to the angular.io project. Everything is still fine.

Now I wanted to change the top component to have a view from a separate file, and I'm having problems. Work code:

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 as follows:

templateUrl: 'app.component.html',

where I have the same code in this file as before

<h1>Angular2</h1>

It seems obvious to work, but it is not. It does not spit out errors, but does not display anything except the message "loading ....", as in the demo version to run

thanks for the help

Peter

Answer 1

Add moduleId: module.id in the @Component decorator. If you do not have this, then Angular 2 will look 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 { } 

Mark article

Answer 2

You need to write a path from the build path.

 templateUrl: 'build/app.component.html' 

Answer 3

Specify the path from the root directory.

Answer 4

use the full path, e.g. app / app.component.html or use the absolute path, for example. /app.component.html ./for the same directory

Answer 5

If you are working with your main component, you can use (absolute path):

 './your_component_name.html' 

in your case:

 './app.component.html', 

If another component - you have several options:

• as said earlier - use moduleId
• use /app/your_component_html_filename as an example /app/dashboard.html or ./app/dashboard.html
• using the full path is not a good idea, but you can

About using .css NOT from your main component:

2. use app/your_component_css_filename example app/dashboard.css without the first braid '/' !!!

Answer 6

The problem here seems an absolute way. The component requires an absolute path to mention. This is my file structure,

Does not work,

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

To my knowledge, the Url or Url HTML template for the stylesheet needs to be specified in the absolute path. I tried the following and am working.

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

Answer 7

In my case, I solved this problem by adding the moduleid property of the component

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

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