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\';

@Comp         


        

Answer 1

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

Answer 2

Use this:

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

Answer 3

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

Answer 4

(Posted on behalf of the OP).

Solved this issue by using

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

under my templateurl.

Answer 5

Generally this type of errors comes 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.