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