Angular项目中@yoyoreact/yoyo-shared模块无法识别问题排查

我有一个一年未维护的Angular项目，执行以下命令尝试重新启动：

node --es-module-specifier-resolution=node ./node_modules/@angular/cli/bin/ng serve

编译失败，首个错误为：

src/app/pages/create/components/steps/offer/offer.component.ts:2:35 -
error TS2307: Cannot find module '@yoyoreact/yoyo-shared' or its
corresponding type declarations.

@yoyoreact/yoyo-shared已安装且存在于node_modules中，但VS Code也无法识别该包，我怀疑这与--es-module-specifier-resolution=node参数有关，希望得到问题原因的排查建议。

以下是项目的package.json：

{
    "name": "yoyo-experience",
    "version": "1.0.0",
    "type": "module",
    "scripts": {
        "start": "ng serve --port 4001",
        "start:local": "node --es-module-specifier-resolution=node ./node_modules/@angular/cli/bin/ng serve --port 4600 --configuration = local",
        "build": "ng build",
        "build:prod": "NODE_ENV=production ng build --configuration production",
        "deploy": "yarn build && firebase use yoyoreact-dev && firebase deploy --only hosting:yoyo-dev-experience",
        "deploy:prod": "yarn build:prod && firebase use yoyoreact-prod && firebase deploy --only hosting:yoyo-experience",
        "lint": "ng lint",
        "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
        "storybook": "yarn docs:json && start-storybook -p 6006",
        "build-storybook": "yarn docs:json && build-storybook"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^14.0.4",
        "@angular/common": "^14.0.4",
        "@angular/compiler": "^14.0.4",
        "@angular/core": "^14.0.4",
        "@angular/forms": "^14.0.4",
        "@angular/platform-browser": "^14.0.4",
        "@angular/platform-browser-dynamic": "^14.0.4",
        "@angular/router": "^14.0.4",
        "@tailwindcss/forms": "^0.4.0",
        "@yoyoreact/yoyo-shared": "git+https://github.com/yoyoreact/yoyo-shared.git",
        "bowser": "^2.11.0",
        "firebase": "^8.6.1",
        "jasmine": "^4.1.0",
        "jasmine-core": "^4.1.1",
        "karma": "^6.3.20",
        "karma-chrome-launcher": "^3.1.1",
        "karma-coverage": "^2.2.0",
        "karma-coverage-istanbul-reporter": "^3.0.3",
        "karma-jasmine": "^5.0.1",
        "karma-jasmine-html-reporter": "^1.7.0",
        "ng-circle-progress": "^1.6.0",
        "npm-check-updates": "^16.10.16",
        "recordrtc": "^5.6.1",
        "rxjs": "~6.6.0",
        "tslib": "^2.6.0",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^14.2.12",
        "@angular-eslint/builder": "^16.1.0",
        "@angular-eslint/eslint-plugin": "16.1.0-alpha.0",
        "@angular-eslint/eslint-plugin-template": "16.1.0-alpha.0",
        "@angular-eslint/schematics": "16.1.0-alpha.0",
        "@angular-eslint/template-parser": "16.1.0-alpha.0",
        "@angular/cli": "^14.0.4",
        "@angular/compiler-cli": "^14.0.4",
        "@angular/language-service": "^14.0.4",
        "@babel/core": "^7.18.6",
        "@compodoc/compodoc": "^1.1.19",
        "@storybook/addon-actions": "^6.5.9",
        "@storybook/addon-essentials": "^6.5.9",
        "@storybook/addon-interactions": "^6.5.9",
        "@storybook/addon-links": "^6.5.9",
        "@storybook/angular": "^6.5.9",
        "@storybook/builder-webpack5": "^6.5.9",
        "@storybook/manager-webpack5": "^6.5.9",
        "@storybook/testing-library": "^0.0.13",
        "@types/node": "^12.20.4",
        "@types/recordrtc": "^5.6.5",
        "@typescript-eslint/eslint-plugin": "5.59.7",
        "@typescript-eslint/parser": "5.59.7",
        "autoprefixer": "10.4.5",
        "babel-loader": "^8.2.5",
        "codelyzer": "^6.0.0",
        "eslint": "^8.40.0",
        "postcss": "^8.4.12",
        "tailwindcss": "3.0.24",
        "ts-node": "~7.0.0",
        "tslint": "^6.1.3",
        "typescript": "^4.7.1-rc"
    },
    "resolutions": {
        "webpack": "5.66.0"
    }
}

排查建议 #

1. 检查目标包的结构配置 #

进入node_modules/@yoyoreact/yoyo-shared目录：

• 确认package.json存在，且main/module/types字段指向正确的文件。如果没有types字段或指向的.d.ts文件不存在，TypeScript会无法识别类型声明。
• 验证package.json中main字段指向的入口文件（比如index.js）确实存在。

2. 调整TypeScript模块解析策略 #

打开项目根目录的tsconfig.json：

• 项目package.json设置了"type": "module"，TypeScript默认会使用node16/nodenext解析策略，和--es-module-specifier-resolution=node可能冲突。尝试显式设置"moduleResolution": "node"，或者暂时移除"type": "module"后重新启动测试。

3. 清理依赖缓存并重新安装 #

执行以下命令彻底重置依赖：

rm -rf node_modules
rm package-lock.json yarn.lock
yarn install # 或 npm install

重新安装后检查@yoyoreact/yoyo-shared是否完整，是否包含类型声明文件。

4. 移除--es-module-specifier-resolution=node测试 #

直接执行ng serve --port 4600 --configuration local（去掉node --es-module-specifier-resolution=node前缀），如果能正常编译，说明该参数确实干扰了Angular的模块解析逻辑——Angular CLI本身已经处理了模块解析，手动添加Node的解析参数容易引发冲突。

5. 升级TypeScript到稳定版 #

项目使用的是TypeScript 4.7.1-rc版本，尝试升级到同大版本的稳定版（比如4.7.4），RC版本可能存在模块解析的潜在问题，且Angular 14对TypeScript 4.7稳定版的兼容性更好。

6. 手动配置TypeScript模块路径 #

如果包的类型声明无法被自动识别，在tsconfig.json的compilerOptions中添加paths配置：

"paths": {
  "@yoyoreact/yoyo-shared": ["node_modules/@yoyoreact/yoyo-shared"]
}

同时检查typeRoots是否包含node_modules/@types，确保TypeScript能扫描到类型声明文件。

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