I can’t figure out why the error is still coming, i declared bootstrap and when debugged bootstrap is defined, does anyone know why its like that, i think its because of bootstrap?

This is my code

import { Component, OnInit, AfterViewInit, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { User } from '../../models/user';
import { UserService } from '../../services/service-user/user.service';
import { ModalService } from '../../services/service-modal/modal.service';
import { LoginResponse } from '../../models/login-response';

declare var bootstrap: any; // Declare Bootstrap for global use

@Component({
  selector: 'app-modal-login',
  templateUrl: './modal-login.component.html',
  styleUrl: './modal-login.component.css'
})
export class ModalLoginComponent implements OnInit, AfterViewInit {
  user: User = new User();

  constructor(
    private userService: UserService, 
    private renderer: Renderer2,
    private el: ElementRef,
    private modalService: ModalService,
  ) { }

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    const modalElement = this.el.nativeElement.querySelector('#loginModal');
    this.renderer.listen(modalElement, 'hide.bs.modal', () => {
      this.clearForm();
    });

    this.modalService.showModal$.subscribe(show => {
      if ('open') {
        this.openModal();
      } else if ('close') {
        this.closeModal();
      }
    });
  }

  login(): void {
      this.userService.loginUser(this.user).subscribe({
        next: (response: LoginResponse) => {
          console.log(response),
          localStorage.setItem('token', response.token),
          this.closeModal()
        },
        error: (error) => console.log(error)
      });
  }

  openModal(): void {
    const modalElement = this.el.nativeElement.querySelector('#loginModal');
    const modal = bootstrap.Modal.getInstance(modalElement);
    modal.show()
  }

  closeModal(): void {
    const modalElement = this.el.nativeElement.querySelector('#loginModal');
    const modal = bootstrap.Modal.getInstance(modalElement);
    modal.hide();
  }

  clearForm(): void {
    this.user = new User(); // Reset the user model to clear the form
  }
}

This is my angular json, as you can see its corrected imported

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "frontend": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "standalone": false
        },
        "@schematics/angular:directive": {
          "standalone": false
        },
        "@schematics/angular:pipe": {
          "standalone": false
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/frontend",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              },
              "src/app/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ],
            "server": "src/main.server.ts",
            "prerender": true,
            "ssr": {
              "entry": "server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kB",
                  "maximumError": "4kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "frontend:build:production"
            },
            "development": {
              "buildTarget": "frontend:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

I already console logged bootstrap and its there, but it still says its undefined