Angular 14 + gRPC-Web构建血压服务时ng build模块缺失问题求助

问题场景 #

使用Angular 14 + gRPC-Web开发血压管理服务，已完成proto文件编写、Angular服务创建、依赖安装及proto编译，但执行ng build时出现以下模块找不到错误：

./src/services/blood-pressure.service.ts:2:0-76 - Error: Module not found: Error: 
   Can't resolve   '../grpc/generated/BPGRPC_pb_service' in   
     '/Users/administrator/Documents/GitHub/End2EndIM/src/services'

./src/services/blood-pressure.service.ts:3:0-58 - Error: Module not found: Error: 
   Can't resolve     'src/grpc/generated/BPGRPC_pb' in   
  '/Users/administrator/Documents/GitHub/End2EndIM/src/services'

核心原因 #

生成的gRPC文件路径与代码导入路径不匹配，且编译命令的输出目录未指向Angular项目的src目录，导致Angular无法识别这些生成文件。

解决步骤 #

1. 修正Proto编译的输出路径 #

编译命令中OUT_DIR原指向项目根目录的grpc/generated，但Angular仅会识别src目录内的文件。修改编译命令，将输出目录改为src/grpc/generated：

# Protoc Path
PROTOC_PATH_DIR="grpc/protos"
# 修改输出目录到src内部
OUT_DIR="src/grpc/generated"
# 确保protoc-gen-ts路径正确指向node_modules工具
PROTOC_GEN_TS_PATH="./node_modules/.bin/protoc-gen-ts"

mkdir -p ${OUT_DIR}

protoc
   --plugin="protoc-gen-ts=${PROTOC_GEN_TS_PATH}"
   --ts_out="service=grpc-web:${OUT_DIR}"
   --proto_path="${PROTOC_PATH_DIR}"
   BPGRPC.proto

2. 统一服务文件的导入路径 #

修改src/services/blood-pressure.service.ts中的导入路径，确保与生成文件的实际位置一致，同时移除不存在的BPGRPC_Module导入：

import { Injectable } from '@angular/core';
import { BrowserHeaders } from 'browser-headers'

// 使用相对路径匹配src/grpc/generated目录
import { BP_GRPC_ServiceClient} from "../grpc/generated/BPGRPC_pb_service"
import { BP_Request } from "../grpc/generated/BPGRPC_pb";

@Injectable({
   providedIn: 'root'
})
export class BloodPressureService {
  // ... 原有服务代码
}

3. 验证生成文件与TS配置 #

• 执行编译命令后，检查src/grpc/generated目录下是否存在BPGRPC_pb_service.ts、BPGRPC_pb.ts等文件，确保编译成功。
• 确认tsconfig.json的compilerOptions中baseUrl设置为"./src"（Angular默认配置），保证绝对路径导入正常工作：

{
  "compilerOptions": {
    "baseUrl": "./src",
    // ... 其他配置
  },
  "include": [
    "src/**/*"
  ]
}

4. 重新编译验证 #

重新执行proto编译命令，再运行ng build，确认模块找不到的错误是否消失。

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