Angular子组件导入服务层报错：无法找到模块的解决方法

这个报错的核心原因是相对路径不正确，你的父组件和子组件处于不同的目录层级，所以导入服务的相对路径需要调整。

1. 直接修正相对路径 #

先明确你的项目层级关系：

• app/ 根目录下同时存在 app.component.ts 和 user-services/ 文件夹
• user-credentials.component.ts 位于 app/user-credentials/ 子文件夹中

父组件用 ./user-services/user-data.service 是正确的，因为它和 user-services 处于同一层级；但子组件需要先回退到上一级目录（即 app/ 根目录），再进入 user-services，所以正确的导入语句应该是：

import {UserDataService} from '../user-services/user-data.service';

2. 更优雅的方案：配置全局路径别名 #

如果项目层级较深，频繁写相对路径容易出错，你可以在 tsconfig.json 中配置路径别名，统一所有组件的导入方式：

1. 打开项目根目录的 tsconfig.json 文件
2. 在 compilerOptions 节点下添加 paths 配置：

{
  "compilerOptions": {
    // 保留原有配置...
    "paths": {
      "@app/*": ["src/app/*"]
    }
  }
}

3. 之后不管是父组件还是子组件，都可以用别名导入服务，无需关心相对路径：

import {UserDataService} from '@app/user-services/user-data.service';

3. 额外检查：确保服务已正确注册 #

除了路径问题，还要确认你的服务已经在Angular中完成注册：

• 如果你使用的是Angular 6及以上版本，推荐直接在服务类上配置 providedIn: 'root'，这样服务会被自动注册为全局单例：

@Injectable({
  providedIn: 'root' // 新增这一行配置
})
export class UserDataService {
  // 服务原有代码...
}

• 如果是旧版本Angular，需要在 AppModule 的 providers 数组中声明服务：

import { UserDataService } from './user-services/user-data.service';

@NgModule({
  // 保留原有配置...
  providers: [UserDataService]
})
export class AppModule { }

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