Angular 4升级至Angular 8后使用相对路径出现模块找不到错误

我来帮你搞定这个迁移后遇到的路径解析问题～从错误信息来看，核心问题是Angular CLI 8的路径解析逻辑和你之前Angular 4搭配system.config.js的规则不兼容，导致构建时把绝对路径当成了相对当前组件的路径来查找，自然找不到模板文件。下面是具体的解决方案：

方案1：改用相对路径引用模板（最稳妥） #

既然你的组件和模板文件在同一个目录下（./app/common/test/），直接把组件里的模板路径改成相对路径即可：

// test.component.ts
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html', // 这里改成相对路径
  styleUrls: ['./test.component.css']
})

Angular CLI对相对路径的解析逻辑非常稳定，这种方式能快速解决问题，也符合CLI项目的最佳实践。

方案2：配置绝对路径映射（保留绝对路径习惯） #

如果你想继续使用绝对路径，需要在tsconfig.app.json里配置路径映射，让CLI能正确识别根目录的绝对路径：

1. 打开tsconfig.app.json，找到compilerOptions节点，添加baseUrl和paths配置：

{
  "compilerOptions": {
    "baseUrl": "./src", // 把基准路径设为src目录
    "paths": {
      "/app/*": ["app/*"] // 映射根目录的/app路径到src/app
    },
    // 其他原有配置...
  }
}

2. 然后在组件里继续使用绝对路径引用模板：

templateUrl: '/app/common/test/test.component.html'

这样CLI构建时会自动把/app/开头的路径映射到src/app/目录下，就能找到对应的模板文件了。

方案3：清理构建缓存 #

有时候旧的构建缓存会导致奇怪的路径解析问题，你可以手动删除dist文件夹，然后执行：

ng build --delete-output-path

或者直接清理CLI的缓存：

rm -rf node_modules/.cache # Mac/Linux
rd /s /q node_modules\.cache # Windows

然后重新构建项目。

额外检查点 #

• 确认angular.json里的build配置中，assets节点没有错误地排除了模板文件（模板文件默认会被CLI处理，一般不需要单独配置）；
• 检查组件文件和模板文件的文件名是否一致（注意大小写！Linux环境下文件名大小写敏感，Windows虽然不敏感，但构建时可能出问题）。

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