ngx guided tour produces "undefined nativeElement" angular error

I'm working on an angular app, I'm having a separate component for ngx-guided-tour , so that I can use it in whichever component i want as a child component. this "undefined reading nativeElement" error gets produced in browser even though guided tour works every time whenever I change location and come back to the previous one , on reloading the same route , this error doesn't appear , it appears only when i go to another route and come back to my route where I've used guided tour.

what i've tried is : earlier i did navigation using router.navigate() , so i changed it from this way to anchor tag href , this way error doesn't get produced because entire page reloads again , but i don't want this , i don't want entire page to reload , how can i do it by using router.navigation()/routerLink only?

code snippet from component B.html :-

<mat-icon class="edit-icon" (click)="onClickEditTemplate(element)" matTooltip="Edit">edit</mat-icon>

code snippet from component B.ts :-

onClickEditTemplate(element, prevLocation?: any) {
this.router.navigate([`/templates/edit-template/${element.id}`]);}

guided tour component.html :-

<ngx-guided-tour></ngx-guided-tour>

guided tour component.ts :-

import { Component, Input, OnInit } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { GuidedTourService, Orientation } from "ngx-guided-tour";
@Component({
  selector: "my-guided-tour",
  templateUrl: "./guided-tour.component.html",
  styleUrls: ["./guided-tour.component.scss"],
})
export class GuidedTourComponent implements OnInit {
  // @Input() tour: any;
  constructor(
    private dialog: MatDialog,
    private guidedTourService: GuidedTourService
  ) {}
  ngOnInit(): void {}
}

code snippet from component A.html :-

<div class="create-temp-container">
          <form *ngIf="isFormValueExists" [formGroup]="createTempForm">
            <mat-form-field class="temp-name-input" appearance="fill">
                <mat-label>Template Name</mat-label>
                <input matInput formControlName="tempName">
            </mat-form-field>
            <div class="bottom-button-container">
                <button mat-stroked-button class="custom-stroked-button" (click)="backButtonHandler()" matTooltip="Previous">
                  <mat-icon>keyboard_double_arrow_left</mat-icon>
                </button>
                <button mat-stroked-button type="button" id="saveTemp" (click)="onSaveTemplate('save_as_draft')" class="custom-stroked-button" matTooltip="Save As Draft">
                  <mat-icon>system_update_alt</mat-icon>
                </button>
                <button mat-stroked-button type="button" id="saveDraftTemp" (click)="onSaveTemplate('save')" class="custom-stroked-button" matTooltip="Save Template">
                  <mat-icon>save</mat-icon>
                </button>
                <button mat-stroked-button type="button" id="saveUseTemp" (click)="onSaveTemplate('save_and_use')" class="custom-stroked-button" matTooltip="Save & Use">
                  <mat-icon>file_open</mat-icon>
                </button>
                <button mat-stroked-button type="button" id="saveDownloadTemp" (click)="onSaveTemplate('download_and_save')" class="custom-stroked-button" matTooltip="Download & Save">
                  <mat-icon>sim_card_download</mat-icon>
                </button>
            </div>
          </form>
        </div>
<!-- guided tour component -->
<my-guided-tour ></my-guided-tour>

code snippet from component A.ts :-

    ngAfterViewInit(): void {
          this.createGuidedTour();
          this.cdref.detectChanges();
  }
  createGuidedTour(){

    this.guidedTour = {
      tourId: 'tour1',
      useOrb: false,
      skipCallback: (stepSkippedOn: number) => {
        console.log('skip callback called');
                this.dialog.closeAll();
      },
      completeCallback: () => {
            console.log('Complete callback called');
                    this.dialog.closeAll();
      },
      steps: [
        {
          title: 'Save template',
          selector: '#saveTemp',
          content: 'Click this button to save template.',
          orientation: Orientation.TopRight
        },
        {
          title: 'Save template as draft',
          selector: '#saveDraftTemp',
          content: 'Click this button to save template as a draft.',
          orientation: Orientation.TopRight,
        },
        {
          title: 'Save & use template',
          selector: '#saveUseTemp',
          content: 'Click this button to save template and directly use it for document generation.',
          orientation: Orientation.TopRight,
        },
        {
          title: 'Save & download template',
          selector: '#saveDownloadTemp',
          content: 'Click this button to save template and also download it at the same time.',
          orientation: Orientation.TopRight
        }
      ]
    };
    // this.showGuidedTour = true;
    this.guidedTourService.startTour(this.guidedTour);
  }

routing-module.ts :-

    const routes: Routes = [
  {
    path: "",

    children: [
      {
        path: 'componentA', 
        children:[
          { 
            path: ':Id', //componetB/componentA/Id
            component : AComponent,
            pathMatch : 'full'
          }
        ]
      },
      { 
        path: '',  //componetB
        component: BComponent,
        pathMatch:'full'
      }
    ]
  },
];

error that i'm getting in browser is :-

ngx-guided-tour native element error