klaro-config module not found

I am integrating klaro in Angular app but some how when I run the command npm run build it throws below error:

./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'

app.component.ts:

import 'zone.js';
import { klaroConfig } from 'klaro-config';
// we can either import Klaro without styles...
import * as Klaro from 'klaro';
export class AppComponent implements OnInit {
  public url: any;
  klaro!: any;
  ngOnInit() {
    (<any>window).klaro = Klaro;
    (<any>window).klaroConfig = klaroConfig;
    Klaro.setup(klaroConfig);
  }
}

web\themes\custom\vc\frontend\cookies-klaro.d.ts:

declare module 'klaro';
declare module 'klaro-config';

tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["googlemaps"]
  },
  "files": ["main.ts", "polyfills.ts"],
  "exclude": ["test.ts", "**/*.spec.ts"],
  "include": ["src/**/*.d.ts", "../cookies-klaro.d.ts"],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

klaro-config.js:

export const klaroConfig = {
  testing: false,
  cookieExpiresAfterDays: 30,
  htmlTexts: true,
  default: true,
  acceptAll: true,
  hideDeclineAll: false,
  hideLearnMore: false,
  disablePoweredBy: true,
  showNoticeTitle: true,
  translations: {
    en: { // ... all required properties }
  }
}

I am not sure which configuration I am missing.

Solution

When running the build for klaro.

It's recommend adding klaro to the allowedCommonJsDependencies array of angular.json

      ...
      "options": {
        "allowedCommonJsDependencies": ["klaro"],
        "assets": [],
        ...

Ensure the path to klaro-config.ts is correctly set. I think it should be

// notice the ./ which means its relative to the current file, the location needs to be correctly set.
// when we specify like `klaro-config` it looks like its a package
import { klaroConfig } from './klaro-config';

If the above idea does not work, move the config directly into the main.ts or whichever file you are calling it from, file and start using it.

klaro-config module not found

Stackblitz Demo