[@types/bootstrap] breaks bootstrap

[kazakevich-alexei]

The broken behavior is shown in such an example as a typical dropdown component.
When trying to open it, the user will not see the opened element.
Although, it seems to me that the element opens and closes instantly.
At the same time, the component from [@types/bootstrap], in my example it is a Tooltip, is working properly.

sample: https://stackblitz.com/edit/stackblitz-starters-bc6frm

The contents of the modified files in a typical Angular project

file package.json:

{
  "name": "full-stack",
  "version": "0.0.0",
  "scripts": {
    // simplify..
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "bootstrap": "^5.3.3",
    "@types/bootstrap": "^5.2.10",
    "bootstrap-icons": "^1.11.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.5",
    "@angular/cli": "^17.3.5",
    "@angular/compiler-cli": "^17.3.0",
    // simplify..
    "schematics-scss-migrate": "^2.3.17",
    "typescript": "~5.4.2"
  }
}

file package.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Demo": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]
          },
        },
      }
    }
  }
}

file app.component.ts

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import {RouterOutlet} from '@angular/router';
import {Tooltip} from "bootstrap";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements AfterViewInit {
  title = 'Demo';

  @ViewChild('withTooltip') withTooltip: ElementRef | undefined;

  ngAfterViewInit() {
    new Tooltip(this.withTooltip?.nativeElement, {
      title: 'This is Tooltip Title',
    })
  }
}

file app.component.html

<div class="container-fluid">
  
  <div class="dropdown my-3">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
  </div>
  
  <div #withTooltip class="d-flex justify-content-between bg-info">
    <span>hover me</span>
  </div>
  
</div>

<router-outlet></router-outlet>

[typescript-bot]

Thanks for the discussion about "bootstrap", some useful links for everyone:

• npm
• DT
• Related discussions

Pinging the DT module owners: @denisname, @peterblazejewicz, @martin-badin, @kyletsang, @luc122c.

[peterblazejewicz]

Hey,
types provide compile-time definition for JS module, that's all, they are not affective native code usage. Do you get any errors? Does it work with explicit usage (when one calls JS to initiate dropdown component, not via data attributes)

[kazakevich-alexei]

there are no errors in the console.

the bootstrap documentation states that it doesn't matter how to initialize.

And the expected logic is that, by adding an element using a type from the library, it is expected that the working elements before will continue to work properly up to this point.
I gave a simple example on stackblitz. Where you can see that by removing the use of the type, the bootstrap elements work correctly. But as soon as I use the type from the library,

new Tooltip(this.withTooltip?.nativeElement, {
      title: 'This is Tooltip Title',
    });

the bootstrap element breaks

[peterblazejewicz]

I only wanted to point to the fact, types are declarative addition to your existing code dev setup, just for TS compiler. Those are declarations and should not impact actual code execution or compilation process.
If you expect Bootstrap to work in Angular (and test it) via declarative markup:

• just import 'bootstrap', so it' imported into compiled bundle (or via 'scripts' section in config or via script tag in html template)
• check if your markup works when used in NG template.
• do not add '@types/bootstrap' in your package.json