Error: Uncaught (in promise): Failed to load login.component.html

Question

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

Here is my login.component.ts

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

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

export class loginComponent{

}

Here is my login.component.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.component.ts and login.component.html both in the same location.

When I compile this code I am getting an error stating

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

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

Is login.component.html at root level? You're getting a 404, meaning it can't find the page at localhost:8081/login.component.html. — Obsidian Age
it is under a subdirectory called /login/login.component.html — skid
i even tried to give the templateUrl : './../login/login.component.html' still getting the same error — skid

Tiep Phan Tiep Phan · Accepted Answer · 2017-02-09T02:45:04

you need config your app to using relative url

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    //... other options
  }
}

login.component.ts

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

@Component({
    moduleId: module.id,    // fully resolved filename; defined at module load time
    selector: 'login' ,
    templateUrl : './login.component.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": "commonjs" in your tsconfig.json.

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

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

Error: Uncaught (in promise): Failed to load login.component.html

6 Answers