Angular 2自定义组件编译报错：路径非模块/模块未找到

你在创建自定义组件时踩了两个关键的小坑，导致出现了模块未找到的编译报错，下面一步步帮你修复：

1. 纠正组件文件的类型与内容 #

你把DeptComponent的TypeScript代码写到了dept.component.html文件里——这完全搞错了文件分工：.html是组件的模板文件，只能放HTML结构内容；而组件的类定义、装饰器这些代码必须放在.ts后缀的文件中。

正确的文件拆分： #

• 创建dept.component.ts文件，写入组件的TypeScript代码：

import {Component} from '@angular/core'
@Component({
 selector : 'dept-sel',
 templateUrl : './dept.component.html' // 确保模板文件路径和实际位置匹配
})
export class DeptComponent {
 title = 'app1';
}

• 单独创建dept.component.html模板文件，添加组件的HTML内容（比如测试用的简单内容）：

<p>{{title}}</p>

2. 验证文件路径与导入语句的一致性 #

在app.module.ts里你写了这样的导入语句：

import {DeptComponent} from './Departments/dept.component'

请确认你的dept.component.ts文件确实存放在src/Departments/目录下（注意Angular的文件路径区分大小写，别写错文件夹或文件名的大小写）。如果组件文件在其他目录，要同步修改导入路径。

3. 重新启动开发服务 #

修改完成后，先停止当前运行的ng serve，再重新启动命令，编译错误应该就能消失了。

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