Bootstrap Carousel does not auto-slide when routing back in angular?

The Problem is when I start my angular application the image slider using bootstrap carousel is working fine. But when I routing to the other view and coming back to the image slider view it's not auto sliding and also I can use next and prev button to change the images but it is not auto-sliding. It works only when I reload the page. How to solve this ?

Here is my code

.html file


<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-pause="false">

<!-- CAROUSEL INDICATORS -->
<div class="carousel-indicators">
<div *ngFor="let image of images;index as i;first as isFirst" [class.active]="isFirst">
<button type="button" data-bs-target="#myCarousel" [attr.data-bs-slide-to]="i" aria-current="true">
</button>
</div>
</div>

<!-- CAROUSEL IMAGES -->
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000" *ngFor="let image of images;first as isFirst" [class.active]="isFirst">
<img id="carouselImage" src="{{image}}" class="d-block w-100" height="707vh" alt="">
<div class="carousel-caption d-none d-md-block">
<h3>It Differentiates Your Brand From Others</h3>
<p>Kajah Industrial is The leading Industrial In The Country.</p>
<button class="btn" (click)="btnService()">Watch Our Services</button>
</div>
</div>
</div>

<!-- NEXT AND PREV BUTTON -->
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>



.ts file

import { bootstrap } from 'bootstrap';
...
ngOnInit() {
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
}


angular.json file

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"./node_modules/aos/dist/aos.css",
"src/styles.css"
],
"scripts": ["./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/aos/dist/aos.js"
]


And also I found this error in the console

*ERROR TypeError: Cannot read property 'Carousel' of undefined at HomeComponent.ngOnInit *

Continue reading...