Klaro integration with Angular

Question

I am trying to integrate Klaro in Angular 16 but somehow it is not showing the cookie pop-up, here is my code:

Klaro-git-hub-repo

klaro-config.js:

export const klaroConfig = {
  elementID: 'klaro',
  storageMethod: 'cookie',
  cookieName: 'klaro-cookie',
  cookieExpiresAfterDays: 365,
  privacyPolicy: '/privacy-policy.html',
  default: false,
  mustConsent: true,
  acceptAll: true,
  translations: {
    en: {
      consentModal: {
        title: 'Privacy Preferences',
        description:
          'At website name, we are committed to safeguarding your privacy while providing you with the best possible user experience. ' +
          'The information we collect through our website is governed by strict data collection practices, ensuring that your personal information remains secure.',
        privacyPolicy: {
          name: 'Privacy Policy',
          text: 'Read the privacy policy here'
        }
      },
      consentNotice: {
        description:
          'At Carilion Clinic, we are committed to safeguarding your privacy while providing you with the best possible user experience. ' +
          'The information we collect through our website is governed by strict data collection practices, ensuring that your personal information remains secure.',
      }
    }
  },
  app: [
    {
      // In GTM, you should define a custom event trigger named `klaro-google-analytics-accepted` which should trigger the Google Analytics integration.
      name: 'google-analytics',
      purposes: [ 'analytics' ],
      cookies: [
        /^_ga(_.*)?/,
        /^__utm[a-z]$/, // we delete the Google Analytics cookies if the user declines its use
      ],
    },
    {
      // In GTM, you should define a custom event trigger named `klaro-google-ads-accepted` which should trigger the Google Ads integration.
      name: 'google-ads',
      purposes: [ 'marketing' ],
      cookies: [
        /^_gcl(_.*)?/, // we delete the Google Ads cookies if the user declines its use
      ],
    },
    {
      // In GTM, you should define a custom event trigger named `klaro-facebook-pixel-accepted` which should trigger the Facebook Pixel integration.
      name: 'facebook-pixel',
      purposes: [ 'marketing' ],
      cookies: [
        'fr',
        'usida',
        'ps_n',
        '_fbp', // we delete the Facebook Pixel cookies if the user declines its use
      ],
    },
    {
      // In GTM, you should define a custom event trigger named `klaro-linkedin-insights-accepted` which should trigger the LinkedIn Insights integration.
      name: 'linkedin-insights',
      purposes: [ 'marketing' ],
      cookies: [
        /^_gcl(_.*)?/, // we delete the LinkedIn Insights cookies if the user declines its use
      ],
    },
    {
      // In GTM, you should define a custom event trigger named `klaro-linkedin-insights-accepted` which should trigger the LinkedIn Insights integration.
      name: 'microsoft-clarity',
      purposes: [ 'analytics' ],
      cookies: [
        /^[A-Z]*ID$/,
        /^_cl[c,s]k$/, // we delete the LinkedIn Insights cookies if the user declines its use
      ],
    },
  ]
};

app.component.ts:

import { klaroConfig } from '../klaro/klaro-config';
declare const Klaro: any;
ngOnInit() {
    const klaro = new Klaro(klaroConfig);
    klaro.init();
}

angular.json:

"styles": [ "src/klaro/klaro.css"],
"scripts": [ "src/klaro/klaro.js" ]

package.json:

"klaro": "^0.7.21",

I can see in <div id="klaro"></div> has been created in the DOM but somehow popup is not showing

Answer 1

The problem seems to be with the config, I followed along with the webpack example and it works great!

config

export const klaroConfig = {
  translations: {
    en: {
      googleAnalytics: {
        title: 'Google Analytics',
        description:
          'The analytics service ran by a most definitely non-evil company.',
      },
      purposes: {
        analytics: 'Analytics',
        styling: 'Styling',
      },
    },
  },
  apps: [
    {
      name: 'googleAnalytics',
      purposes: ['analytics'],
    },
    {
      name: 'bootstrap',
      title: 'Bootstrap (external resource)',
      description: 'Example for embedding external stylesheets.',
      purposes: ['styling'],
    },
  ],
};

ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { klaroConfig } from './klaro-config';
// we can either import Klaro without styles...
import * as Klaro from 'klaro';
// and the manually load the styles (e.g. to bundle them manually)

// we set up Klaro with the config
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
    <br/>
    <a class="button is-success" (click)="show()"
      >Change consent settings</a
    >
  `,
})
export class App {
  name = 'Angular';
  klaro!: any;

  constructor() {
    (<any>window).klaro = Klaro;
    (<any>window).klaroConfig = klaroConfig;
    Klaro.setup(klaroConfig);
  }

  show() {
    Klaro.show();
  }
}

bootstrapApplication(App);

Stackblitz Demo