错误：未捕获（承诺）：无法加载 login.component.html

Question

我尝试在 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="text" placeholder="username">
    <input type="text" placeholder="password">
    <button>Login</button>
</div>

我的目录结构在同一位置同时包含 login.component.ts 和 login.component.html。

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

本地主机：8081/login.component.html 未找到 404

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

Answer 1

您需要将您的应用程序配置为使用相对 url

配置文件

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

登录.component.ts

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

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

export class 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