TypeScript编译报找不到路径、模板URL错误如何解决

报错提示：Could not find a part of the path of typescript

排查步骤按优先级从高到低排列 #

• 第一步：检查组件元数据里的模板路径配置
  打开对应报错的组件ts文件（这里是app.component.ts），检查@Component装饰器内的templateUrl字段：
  • 该路径为相对于当前ts文件的相对路径，同目录下的html文件必须写成./app.component.html，不可漏写开头的./
  • 严格匹配文件名大小写，例如写成App.Component.html这类大小写错误的路径，在非Windows环境下会直接识别为文件不存在
  • 不要写错文件层级，例如html放在templates子文件夹下要写成./templates/app.component.html
• 第二步：修复模板文件本身的语法错误
  你提供的app.component.html存在3处会导致编译器解析模板失败的语法问题，这类解析失败经常被编译器误报为路径不存在错误：
  1. 结构型指令拼写错误：*ngfor为错误写法，Angular指令为驼峰命名，正确写法是*ngFor（大写F）
  2. 插值表达式语法错误：{item.xxx}为错误写法，Angular插值需要双花括号，正确写法是{{item.xxx}}
  3. HTML注释与标签结构不匹配：你注释编辑表单时只注释了表单开头到AMT输入框的部分，后面的提交/取消按钮、</form>闭合标签落在了注释外，导致HTML结构错乱，编译器无法正常解析模板文件。修复方式为要么把整个编辑表单块（包括按钮、闭合标签）全部包进注释，要么取消注释补全表单结构。
• 第三步：清理编译缓存重启服务
  如果路径和语法都确认无误，按以下顺序操作清理缓存：
  1. 终止当前运行的ng serve或编译进程
  2. 删除项目根目录下的.angular缓存文件夹、node_modules文件夹
  3. 重新执行依赖安装命令：npm install
  4. 执行ng serve重新启动编译
• 第四步：检查项目配置文件
  如果以上操作都无效，核对两个核心配置文件：
  • 检查angular.json中root、sourceRoot字段配置是否和实际项目目录结构匹配，默认Angular项目sourceRoot值为"src"
  • 检查tsconfig.json中compilerOptions.baseUrl、paths字段配置，不要出现路径别名覆盖模板实际目录的情况

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