Angular嵌套组件编译报错：Module Not found问题求助

嘿，我之前刚踩过几乎一模一样的坑！看你贴的错误提示，核心问题就是Angular找不到employee.component.html的正确路径，咱们一步步来排查解决：

先搞懂错误根源 #

错误里显示它在C:\Users\Ani\Desktop\Training\Angular\my-first-project\src\app\employee目录下找./app/employee/employee.component.html，这相当于在src/app/employee/app/employee/下去找文件——明显多嵌套了一层app/employee/，完全不对！

因为你的employee.component.ts本身就已经在src/app/employee文件夹里了，所以HTML模板的相对路径根本不需要再加上app/employee/这部分。

具体修复步骤 #

1. 修正@Component里的templateUrl路径 #

打开你的employee.component.ts，找到@Component装饰器里的templateUrl配置，现在应该是写错了路径：

@Component({
  selector: 'app-employee',
  templateUrl: './app/employee/employee.component.html' // 这里是错误路径！
})

把它改成同目录下的相对路径，二选一都可以：

@Component({
  selector: 'app-employee',
  // 方式一：直接写文件名（推荐）
  templateUrl: 'employee.component.html'
  // 方式二：用./表示当前目录
  // templateUrl: './employee.component.html'
})

2. 确认HTML文件的实际位置和拼写 #

去你的项目目录C:\Users\Ani\Desktop\Training\Angular\my-first-project\src\app\employee下检查：

• 确保employee.component.html确实存在
• 文件名拼写完全一致（Angular对大小写敏感，别写成Employee.Component.html这种错误格式）

3. 检查NgModule的声明是否正确 #

既然问题是添加组件到@NgModule后出现的，再确认下你的模块文件（比如AppModule）里的配置：

import { EmployeeComponent } from './employee/employee.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent // 确保这里正确引入并声明了组件
  ],
  // 其他元数据（imports、providers等）
})
export class AppModule { }

4. 重启Angular开发服务器 #

有时候缓存会导致奇怪的路径问题，修改完后关掉当前运行的ng serve命令，重新执行一次，让服务器重新编译所有文件。

如果以上步骤都试过还是不行，可以试试用绝对路径（从src目录开始）：

templateUrl: 'src/app/employee/employee.component.html'

不过相对路径是Angular推荐的最佳实践，优先用前面的方法。

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