I tried to access a custom built html using templateUrl in Angular2.

Here is my loginponent.ts

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

@Component({
    selector: 'login' ,
    templateUrl : './loginponent.html' 
})

export class loginComponent{

}

Here is my loginponent.html

<div class="container">
    <input type="text" placeholder="username">
    <input type="text" placeholder="password">
    <button>Login</button>
</div>

My directory structure has both the loginponent.ts and loginponent.html both in the same location.

When I pile this code I am getting an error stating

localhost:8081/loginponent.html not found 404

Unhandled Promise rejection: Failed to load loginponent.html ; Zone: ; Task: Promise.then ; Value: Failed to load loginponent.html undefined

I tried to access a custom built html using templateUrl in Angular2.

Here is my login.ponent.ts

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

@Component({
    selector: 'login' ,
    templateUrl : './login.ponent.html' 
})

export class loginComponent{

}

Here is my login.ponent.html

<div class="container">
    <input type="text" placeholder="username">
    <input type="text" placeholder="password">
    <button>Login</button>
</div>

My directory structure has both the login.ponent.ts and login.ponent.html both in the same location.

When I pile this code I am getting an error stating

localhost:8081/login.ponent.html not found 404

Unhandled Promise rejection: Failed to load login.ponent.html ; Zone: ; Task: Promise.then ; Value: Failed to load login.ponent.html undefined

• javascript
• jquery
• html
• angular
• typescript

Share Improve this question Follow edited Feb 10, 2017 at 10:32 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Feb 9, 2017 at 2:12 skidskid 97844 gold badges1313 silver badges3030 bronze badges 5

• Is login.ponent.html at root level? You're getting a 404, meaning it can't find the page at localhost:8081/login.ponent.html. – Obsidian Age Commented Feb 9, 2017 at 2:13
• it is under a subdirectory called /login/login.ponent.html – skid Commented Feb 9, 2017 at 2:15
• i even tried to give the templateUrl : './../login/login.ponent.html' still getting the same error – skid Commented Feb 9, 2017 at 2:18
• Are u using webpack or SystemJS ? – Jorawar Singh Commented Feb 9, 2017 at 2:19
• i am using webpack – skid Commented Feb 9, 2017 at 13:56

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

you need config your app to using relative url

tsconfig.json

{
  "pilerOptions": {
    "module": "monjs",
    "target": "es5",
    //... other options
  }
}

login.ponent.ts

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

@Component({
    moduleId: module.id,    // fully resolved filename; defined at module load time
    selector: 'login' ,
    templateUrl : './login.ponent.html' 
})

export class loginComponent{

}

The key lesson is to set the moduleId : module.id in the @Component decorator! Without the moduleId setting, Angular will look for our files in paths relative to the application root.

And don’t forget the "module": "monjs" in your tsconfig.json.

The beauty of this ponent-relative-path solution is that we can (1) easily repackage our ponents and (2) easily reuse ponents… all without changing the @Component metadata.

https://blog.thoughtram.io/angular/2016/06/08/ponent-relative-paths-in-angular-2.html

For developers using Webpack and facing this problem.

I resolved this issue by replacing:

loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']

To:

loaders: ['awesome-typescript-loader', 'angular2-template-loader']

(Posted on behalf of the OP).

Solved this issue by using

require('./login.ponent.html')

under my templateurl.

Generally this type of errors es because of the Angular could not find the specified path. I have solved this issue by changing the html file path in my templateUrl in @Component.

Use this:

template: require('./login.ponent.html')

You can pass your ponent using require()

for. e.g. template: require('./details.ponent.html')