错误：未捕获（承诺）：无法加载login.component.html [英] Error: Uncaught (in promise): Failed to load login.component.html

问题描述

我试图在Angular2中使用templateUrl访问定制的html。

这是我的login.component.ts

  import {Component } from @ angular / core'; 
 
 @Component（{
 selector：'login'，
 templateUrl：'./login.component.html'
}）
 
 export class loginComponent {
 
} 
  

这是我的login.component。 html

 < div class =container> 
< input type =textplaceholder =username> 
< input type =textplaceholder =password> 
<按钮>登录< /按钮> 
< / div> 
  

我的目录结构中包含login.component.ts和login.component.html，两者都相同位置。

当我编译这段代码时，我收到一个错误消息，说明

localhost：8081 / login.component.html找不到404

未处理的承诺拒绝：未能加载login.component.html;
区域：;任务：Promise.then;价值：无法加载
login.component.html undefined

解决方案

配置你的应用程序使用相对url

$ p


$ b $ p $ <$> {
compilerOptions：{
module：commonjs，
target：es5，
// ...其他选项
}
}


login.component.ts <
$ b

从'@ angular / core'导入{Component};

  moduleId：module.id，//完全解析的文件名;在模块加载时定义
选择器：'login'，
 templateUrl：'./login.component .html'
}）
 
导出类loginComponent {
 
} 
  

关键教训是在@Component
装饰器中设置moduleId：module.id！如果没有moduleId设置，Angular会在相对于应用程序根目录的路径中查找我们的
文件。

不要忘记tsconfig.json中的module：commonjs。

这个
组件相对路径解决方案的优点是我们可以（1）轻松重新包装
组件，（2）轻松重用组件...全部不用改变
的@Component元数据。

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

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

解决方案

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

这篇关于错误：未捕获（承诺）：无法加载login.component.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！