Multiple installations of Google Tag Manager detected about angular-google-tag-manager HOT 8 CLOSED

  import { Component, isDevMode, OnInit, OnDestroy } from '@angular/core';
  import { Router, NavigationEnd } from '@angular/router';
  import { MsalService, BroadcastService } from '@azure/msal-angular';
  import { Logger, CryptoUtils } from 'msal';
  import { Subscription } from 'rxjs';
  import { AuthService } from '@shared/service/auth.service';
  import { PixelService } from '@shared/service/pixel.service';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
  })
  export class AppComponent implements OnInit, OnDestroy {
    subscriptions: Subscription[] = [];
  
    title = 'application';
    isIframe = false;
  
    constructor(
      private authService: MsalService,
      private broadcastService: BroadcastService,
      private router: Router,
      private authTempService: AuthService,
      private pixelService: PixelService,
    ) {}
  
    ngOnInit(): void {
      let loginSuccessSubscription: Subscription;
      let loginFailureSubscription: Subscription;
      let loginssoFailureSubscription: Subscription;
  
      this.isIframe = window !== window.parent && !window.opener;
  
      loginSuccessSubscription = this.broadcastService.subscribe('msal:loginSuccess', () => {
        if (isDevMode()) {
          console.log('succsess:', this.authService.getAccount());
        }
        this.authTempService.setMessage('Se ha logeado correctamente');
        this.router.navigate([`/home`]);
      });
  
      loginFailureSubscription = this.broadcastService.subscribe('msal:loginFailure', (error) => {
        if (error.error) {
          this.authTempService.getMessageError(error.error);
        }
        if (isDevMode()) {
          console.log('login Failure ' + error);
        }
      });
  
      loginssoFailureSubscription = this.broadcastService.subscribe('msal:ssoFailure', (payload) => {
        this.authTempService.setMessage('Login falló: ' + payload);
        if (isDevMode()) {
          console.log('sso Failure ' + payload);
        }
      });
  
      this.subscriptions.push(loginSuccessSubscription);
      this.subscriptions.push(loginFailureSubscription);
      this.subscriptions.push(loginssoFailureSubscription);
  
      this.authService.handleRedirectCallback((authError, response) => {
        if (authError) {
          console.error('Redirect Error: ', authError.errorMessage);
          return;
        }
  
        console.log('Redirect Success: ', response.accessToken);
      });
  
      if (isDevMode()) {
        this.authService.setLogger(
          new Logger(
            (logLevel, message, piiEnabled) => {
              console.log('MSAL Logging: ', message);
            },
            {
              correlationId: CryptoUtils.createNewGuid(),
              piiLoggingEnabled: false,
            },
          ),
        );
      }
      this.setPixel();
    }
  
    ngOnDestroy(): void {
      this.subscriptions.forEach((subscription) => subscription.unsubscribe());
    }
  
    setPixel(): void {
      const hostName = window.location.hostname;
      this.router.events.forEach((item) => {
        if (item instanceof NavigationEnd) {
          const gtmTag = {
            event: 'atm.pageview',
            pageHost: hostName,
            pagePath: item.url,
            pageTitle: 'App',
          };
          this.pixelService.pushTag(gtmTag);
        }
      });
    }
  }

  import { Injectable } from '@angular/core';
  import { AuthService } from '@shared/service/auth.service';
  import { GoogleTagManagerService } from 'angular-google-tag-manager';
  import Utils from '@shared/app.utils';
  
  @Injectable({
    providedIn: 'root',
  })
  export class PixelService {
    constructor(private authService: AuthService, private gtmService: GoogleTagManagerService) {}
  
    initGtm(): void {
      if (!Utils.isLocalMode()) {
        this.gtmService.addGtmToDom();
      }
    }
  
    pushTag(tag: object): void {
      if (!Utils.isLocalMode()) {
        const userId = this.authService.getUserId();
        const gtmTag = { ...tag, ...{ userId: userId } };
        console.log(
          '%c Google Tag ↴',
          'background: rgba(26,115,232,.1); color: #1565cf; font-weight: 800; font-size: 12px',
        );
        console.table(gtmTag);
        this.gtmService.pushTag(gtmTag);
      }
    }
  }

  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { Router, NavigationEnd } from '@angular/router';
  import { Subscription } from 'rxjs';
  import { GoogleTagManagerService } from 'angular-google-tag-manager';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
  })
  export class AppComponent implements OnInit, OnDestroy {
    subscriptions: Subscription[] = [];
  
    title = 'app';
    isIframe = false;
  
    constructor(private router: Router, private googleTagManagerService: GoogleTagManagerService) {}
  
    ngOnInit(): void {
      this.router.events.forEach((item) => {
        if (item instanceof NavigationEnd) {
          const gtmTag = {
            event: 'atm.pageview',
            pageHost: 'hostName',
            pagePath: item.url,
            pageTitle: 'App',
          };
          this.googleTagManagerService.pushTag(gtmTag);
        }
      });
    }
  
    ngOnDestroy(): void {
      this.subscriptions.forEach((subscription) => subscription.unsubscribe());
    }
  }