Angular 15部署Heroku遇TS2307及NG1010错误求助

核心问题 #

本地开发运行正常，但部署到Heroku时出现两类关键错误：

• TS2307：找不到子组件的模块或对应类型声明
• NG1010：HomeModule的declarations数组中存在无法静态解析的组件引用

一步步排查修复 #

1. 检查文件名大小写 #

Heroku基于Linux系统，严格区分文件名大小写，而Windows/macOS默认不区分，这是最常见的坑：

• 打开home.module.ts，逐行核对import路径的大小写，和实际文件夹、文件名完全匹配
• 比如确认authentification文件夹名称是否和代码拼写一致，有没有大小写差异

2. 清理缓存+本地预构建，提前暴露问题 #

本地缓存可能掩盖代码问题，先在本地执行以下命令排查：

# 清理Angular本地缓存
ng cache clean
# 删除依赖包和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 执行生产环境构建，验证本地是否也会报错
ng build --prod

如果本地构建也出现相同错误，说明问题出在代码本身，和Heroku配置无关

3. 修正组件声明的问题 #

NG1010错误指向declarations数组的问题，按以下步骤检查：

• 确保所有在declarations里的组件，都已经在模块顶部正确import
• 禁止同一个组件被多个模块声明，这是Angular的硬性规则
• 检查组件类名拼写，比如是否把ListeRolesComponent写成了ListRolesComponent

4. 补全懒加载路由的语法 #

你提供的路由配置存在语法缺失，canActivate字段没有赋值，要么补全守卫类，要么删除该字段：

{ 
  path: PathVariables.HOME, 
  loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
  canActivate: [你的路由守卫类] // 比如AuthGuard，不需要则直接删除该行
}

语法不完整可能导致编译时模块解析异常

5. 确认Heroku构建配置正确 #

打开package.json，检查scripts中的构建命令是否正确：

"scripts": {
  "build": "ng build --prod",
  "start": "node server.js" // 若使用Express作为静态文件服务器则保留，否则按需调整
}

如果没有自定义服务器，需确保Heroku能正确处理Angular静态文件的部署

6. 验证组件文件是否存在 #

最后确认报错的组件文件确实存在于指定路径：

• ./authentification/gestion-des-permissions/gestion-des-permissions.component.ts
• ./authentification/roles/liste-roles/liste-roles.component.ts
• ./authentification/roles/modification/modification.component.ts
  避免文件被误删除或路径层级错误

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