Angular中HostResourceResolver错误求助：无法解析HTML模板文件

嘿，第一次接触Angular就碰到这种问题很正常，别慌！我仔细看了你的代码和错误提示，问题其实出在一个很容易忽略的细节上——文件名拼写错误。

你看错误信息里的路径：./product-list.compoment.html，还有你代码里写的也是这个文件名，但正确的拼写应该是product-list.component.html（注意是component，你写成compoment少了一个字母n）。

具体修复步骤： #

• 先确认你的HTML文件实际命名是product-list.component.html（检查文件管理器里的文件名，把拼写错误改过来）
• 然后修正product-list.component.ts里的templateUrl，把错误的拼写改掉：

import { Component } from '@angular/core';
@Component({
  selector: 'pm-products',
  templateUrl: './product-list.component.html' // 这里修正了拼写错误
})
export class ProductListComponent{
  pageTitle: string = 'Product List';
}

• 另外你之前尝试的.products/product-list.compoment.html路径是错的，因为product-list.component.ts和对应的HTML文件在同一个products文件夹下，用./开头指向同目录文件就足够了，不需要额外加products/。

Angular对文件路径和文件名的拼写（包括大小写）特别敏感，以后写路径的时候多核对一下文件名就不会踩这种小坑啦～

内容的提问来源于stack exchange，提问作者Minimalism