Angular集成Klaro时执行npm run build报错：找不到klaro-config模块

问题描述 #

执行npm run build时出现如下错误：

./src/app/app.component.ts:6:0-43 - Error: Module not found: Error:
Can't resolve 'klaro-config' in
'C:\wamp64\www\cocomelon\vcc\web\themes\custom\vc\frontend\src\app'

核心原因 #

你通过declare module 'klaro-config'让TypeScript识别了这个模块名，但Node/Angular的模块解析器找不到对应的本地文件——因为你用了类似npm包的导入方式，而klaro-config.js是本地自定义文件，不是已安装的依赖包。

解决方法 #

方法一：使用相对路径导入（推荐） #

修改app.component.ts中的导入语句，根据klaro-config.js的实际位置写相对路径：
假设klaro-config.js位于web/themes/custom/vc/frontend/目录下（和src同级），则导入路径应为：

import { klaroConfig } from '../../klaro-config';

（如果文件位置不同，自行调整层级，比如在src目录下就用../klaro-config）

方法二：配置tsconfig路径别名（保持模块名导入） #

如果想继续使用import { klaroConfig } from 'klaro-config'的写法，在tsconfig.app.json的compilerOptions中添加paths配置，指定模块名对应的本地文件路径：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["googlemaps"],
    "paths": {
      "klaro-config": ["../klaro-config.js"] // 路径根据实际文件位置调整
    }
  },
  "files": ["main.ts", "polyfills.ts"],
  "exclude": ["test.ts", "**/*.spec.ts"],
  "include": ["src/**/*.d.ts", "../cookies-klaro.d.ts"],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

验证 #

修改后重新执行npm run build，确认报错消失。

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