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

Solution 1

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

Solution 2

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']

Solution 3

(Posted on behalf of the OP).

Solved this issue by using

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

under my templateurl.

Comments

[skid]

i am using webpack so i cannot use the moduleID

[Tiep Phan]

did you try all methods in the above article

[Wagner Danda da Silva Filho]

How? I get "template must be a string. Value could not be determined statically"

[halfer]

@Wagner: it may be worth searching the site for questions featuring that error. This post was originally written by skid, and they have not logged into the site for more than a year, so you probably won't get an answer from them.