34

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'cwf',
  templateUrl: './app.template.html'
})
export class AppComponent {
}

and in app.template has some text. If add same text as template in typescript file it works. Same thing if add in html and then call the html as template URL it doesnt work.

raj m
  • 1,863
  • 6
  • 21
  • 37
  • i think you are getting the issue because you have not set template path relative to your component as per your folder structure. so correct path as per your folder structure. – ranakrunal9 Sep 15 '16 at 05:41
  • It is in the same folder.. There is no error thrown in compiler – raj m Sep 15 '16 at 05:46
  • if its in same folder then can you try by removing `./` from path. – ranakrunal9 Sep 15 '16 at 05:51
  • 5
    tried, still I am getting same error.. zone.js:344 Unhandled Promise rejection: Failed to load app.template.html ; Zone: ; Task: Promise.then ; Value: Failed to load app.template.html undefinedconsoleError @ zone.js:344_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375ZoneTask.invoke @ zone.js:297 zone.js:346 Error: Uncaught (in promise): Failed to load app.template.html(…) – raj m Sep 15 '16 at 05:52

5 Answers5

59

UPDATE

According to Angular 2 Docs change-log

All mention of moduleId removed. "Component relative paths" cookbook deleted (2017-03-13)

We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration. This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.

We strongly encourage you to only write component-relative paths. That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you.

angular quickstart

meta: {
  './*.js': {
    loader: 'systemjs-angular-loader.js'
  }
}

https://github.com/angular/quickstart/blob/master/src/systemjs.config.js#L34-L38

angular-cli

changelog 1.0.0-rc.4 (2017-03-20)

To align with @angular/core behavior, all templateUrl and styleUrls are now treated as relative - developers should use the ./foo.html form in all cases.

See also

PREVIOUS VERSION

By default, you should specify the full path back to the application root. It is absolute with respect to the application root.

For your case it may be:

@Component({
  selector: 'cwf',
  templateUrl: 'app/app.template.html' // or src
})
export class AppComponent {}

If you want to specify template and style URLs relative to their component class files you should set moduleId property to decorator of your component:

@Component({
  moduleId: module.id
  selector: 'cwf',
  templateUrl: './app.template.html'
})
export class AppComponent {}

If you use SystemJS, then it should be __moduleName variable instead of the module.id variable:

@Component({
  moduleId: __moduleName,
  selector: 'cwf',
  templateUrl: './app.template.html'
})
export class AppComponent {}

See also more details:

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • BTW, Why I am getting no provider for router if I initialise Router in constructor ? like constructor(private _router:Router){} and I have imported import { Router } from '@angular/router'; Can you please tell me – raj m Sep 15 '16 at 07:04
  • The relative path, beginning with dot, worked for me (i.e. ./my-file.html), and it was the only path that worked, but the mistake that was fooling me was I needed to rebuild my project after adjusting templateUrl: in @Component. I was forgetting that need and was changing the path, saving, and flipping to the browser and refreshing. That didn't cut it. Needed to rebuild. – StackOverflowUser Jul 08 '17 at 09:46
4

worked for me like this, if you defined in inner folders

@Component({

    selector: 'people-list', 
    templateUrl:'app/component/peopleList/people-list.html'
})
Nikolay Kostov
  • 16,433
  • 23
  • 85
  • 123
Muhammed Ajmal
  • 51
  • 7
1

Solve this error by just adding module.ts in that particular component typescript file.

My Component file is of code: 

@Component({
    moduleId: module.id,                <--- add this line in your component file
    selector: 'items',
    templateUrl:'./items.component.html'
})
Ganesh Sanap
  • 1,386
  • 1
  • 8
  • 18
DKR
  • 5,426
  • 1
  • 19
  • 21
0

Adding moduleId: module.id to the @component declaration did the trick for me.

Example for a component located in 'app/login/login.component.ts':

@Component({
  moduleId: module.id,
  templateUrl: './login.component.html'
Guillaume Serrat
  • 165
  • 8
0

My answer may or maynot help. My component looked like this:

@Component({
  "selector": "complex-chat-message",
  "templateUrl": "./complex-chat-message.html"
})

I wrote this component by hand and as a habit of writing jsons I ended up using double quotes in selector and templateUrl and I got this same issue. After removing the double quotes, the issue was gone.

siddharthrc
  • 624
  • 9
  • 11