Angular cannot find templateUrl

Question

I am trying to load Html files using the following code in angular js 2. This file is available under products folder and the html file that i am trying to load is also in the same folder. Still it is not working.

import {Component} from 'angular2/core';

@Component({
    templateUrl:'./products/app.component.pen.html'
})

export class PenComponent
{

}

The above file is getting loaded from the below AppComponent.

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
import {PenComponent} from "./products/app.component.pen";
import {BookComponent} from "./products/app.component.book";  

@Component({
    selector: 'my-app',
    template: `
            <header>
                <ul>
                <li>
                <a [routerLink]="['Pen']">Pen</a></li>

                <li>
                <a [routerLink]="['Book']">Book</a></li>
                </ul>

            </header>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([
    {path: '/pen', name: 'Pen', component: PenComponent, useAsDefault:true}
    {path: '/book', name: 'Book', component: BookComponent}


])


export class AppComponent {

}

please use single quote in - './products/app.component.pen'. with every import. — micronyks
– micronyks, Commented Apr 12, 2016 at 4:36
Are you able to load PenComponent? Do you get any error ? if yes, which? — micronyks
– micronyks, Commented Apr 12, 2016 at 4:45
templateUrl doesn't work like import you have to give full path from starting folder e.g. app/products/app.component.pen — Dimple
– Dimple, Commented Apr 12, 2016 at 4:47
@micronyks - If i have some text in template instead of templateurl its working fine. — Udaya Vani
– Udaya Vani, Commented Apr 12, 2016 at 4:50

drew moore · Accepted Answer · 2016-04-13 08:57:01Z

27

You have to use paths relative to the root of the project for styleUrls and templateUrls (so app/foo/bar/products/app.component.pen.html instead of ./products/app.component.pen.html).

To use urls relative to the component file, your project must be a commonjs module (set "module":"commonjs" in tsconfig), and you have to include module.id in your component decorators:

@Component({ 
  selector: 'foo',
  moduleId: module.id // <== need this
  templateUrl: './foo.html'
})

edited Apr 13, 2016 at 8:57

answered Apr 12, 2016 at 4:57

drew moore

32.8k17 gold badges79 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mawg Over a year ago

A reference to the docs would have been nice. Upvote, though :-)

Dimple · Accepted Answer · 2016-04-12 05:13:59Z

2

Its shown here that relatives path works but i think that that are nor release yet.
You have to use full path from starting folder. For e.g. if your start folder name is app. You have to give path as:
templateUrl:app/products/app.component.pen

edited Apr 12, 2016 at 5:13

answered Apr 12, 2016 at 4:59

Dimple

4539 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular cannot find templateUrl

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related