Angular生产构建无法找到部分模块的@types问题求助

项目结构为：主应用通过tsconfig.json的paths配置引入app目录外的自有类库。ng serve运行一切正常，但执行生产构建时出现两个核心错误：无法找到luxon和leaflet模块的声明文件，提示模块隐式为any类型。

• 主应用已安装这两个模块的@types依赖
• 仅当类库项目目录存在node_modules时构建才能成功，推测构建程序在类库结构而非主应用中查找@types
• 尝试通过tsconfig.json重定向@types无效
• 相同结构的小型示例项目构建正常

错误信息 #

Error: ../../../../xy/advweb/dist/advweb/core/lib/validators/lessThanDate.validator.d.ts:2:26 - error TS7016: Could not find a declaration file for module 'luxon'. 'C:/_Projects/_Git/yy/Source/src/web/node_modules/luxon/build/node/luxon.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/luxon` if it exists or add a new declaration (.d.ts) file containing `declare module 'luxon';`

2 import { DateTime } from 'luxon';
                           ~~~~~~~


Error: ../../../../xy/advweb/dist/advweb/leaflet/lib/components/map/map.component.d.ts:2:39 - error TS7016: Could not find a declaration file for module 'leaflet'. 'C:/_Projects/_Git/yy/Source/src/web/node_modules/leaflet/dist/leaflet-src.js' implicitly has an 'any' type.
  If the 'leaflet' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/leaflet'

2 import { TileLayerOptions, Map } from 'leaflet';

主应用配置 #

tsconfig.json #

{
    "compileOnSave": false,
    "compilerOptions": {
        "traceResolution": true,
        "baseUrl": "./",
        "outDir": "./dist",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitOverride": true,
        "noPropertyAccessFromIndexSignature": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "noFallthroughCasesInSwitch": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "useDefineForClassFields": false,
        "module": "ES2022",
        "target": "ES2022",
        "lib": [
            "ES2022",
            "DOM"
        ],
        "paths": {
            "@angular/*": [
                "./node_modules/@angular/*"
            ],
            "luxon": [
                "./node_modules/luxon"
            ],
            "*": [
                "./node_modules/*"
            ],
            "@advweb/core": [
                "../../../../xy/advweb/dist/advweb/core"
            ],
            "@advweb/kendo2": [
                "../../../../xy/advweb/dist/advweb/kendo2"
            ],
            "@advweb/leaflet": [
                "../../../../xy/advweb/dist/advweb/leaflet"
            ]
        }
    },
    "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true
    }
}

tsconfig.app.json #

{
      "extends": "./tsconfig.json",
      "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": []
      },
      "files": [
        "src/main.ts"
      ],
      "include": [
        "src/**/*.d.ts"
      ]
}

核心原因 #

自有类库的.d.ts文件直接引用了luxon/leaflet，Angular生产构建时会解析这些声明文件的依赖，但类库的dist目录未附带类型依赖映射，导致TypeScript从类库所在目录（而非主应用）查找@types，最终找不到声明。小型示例项目因类库依赖被打包或TypeScript解析逻辑简化，避开了该问题。

具体修复步骤 #

1. 类库侧配置优化

   • 在类库的package.json中，将luxon/leaflet标记为peerDependencies，同时将对应的@types/luxon/@types/leaflet标记为peerDependenciesMeta的optional: true（若类库本身不依赖类型编译）
   • 类库编译时，确保tsconfig.json的declarationMap设为true，让主应用能正确关联类库的类型依赖到主应用的@types

2. 主应用侧配置调整

   • 修改tsconfig.app.json的compilerOptions.types，显式添加luxon和leaflet：

     "compilerOptions": {
       "outDir": "./out-tsc/app",
       "types": ["luxon", "leaflet"]
     }
     

   • 移除tsconfig.json中冗余的paths配置（如单独的luxon映射），保留*映射即可，避免干扰TypeScript默认模块解析逻辑

3. 强制主应用类型优先级（兜底方案）

   • 在主应用根目录创建src/typings.d.ts，添加以下声明：

     declare module 'luxon' {
       export * from '@types/luxon';
     }
     declare module 'leaflet' {
       export * from '@types/leaflet';
     }
     

4. 清理缓存重新构建

   • 删除主应用的node_modules、dist目录，执行npm install后再运行ng build --prod，避免缓存导致的解析异常

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