Search code examples
angulartypescripttwitter-bootstrapngx-bootstrapangular-standalone-components

ngx-bootstrap doesn't support moduleless approach


I just tried installing ngx-bootstrap into an Angular 19 project which has standalone components by default:

E:\Code\angular-app>ng add ngx-bootstrap
✔ Determining Package Manager
  › Using package manager: npm
✔ Searching for compatible package version
  › Found compatible package version: [email protected].
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package
    ✅️ Added "bootstrap
    ✅️ Added "ngx-bootstrap
ngx-bootstrap doesn't support moduleless approach if we couldn't find
    your starting *.module.ts learn more here https://valor-software.com/ngx-bootstrap/#/documentation#installation       

How do I solve this error?


Solution

  • The ngx-bootstrap does not support bootstrapping using bootstrapApplication (standalone way) for now (29-01-2025).

    Until it is supported you can install it manually.

    Getting Started- Manual Way

    npm install ngx-bootstrap --save
    

    If there are services that need to be added, then use importProvidersFrom:

    import { bootstrapApplication } from '@angular/platform-browser';
    import { TooltipModule } from 'ngx-bootstrap/tooltip';
    import { AppComponent } from './app/app.component';
    import { importProvidersFrom } from '@angular/core';
    
    bootstrapApplication(AppComponent, {
      providers: [
        importProvidersFrom([
            // …
            TooltipModule.forRoot(),
            // …
        ])
      ]
    })
      .catch((err) => console.error(err));
    

    Directly add the component to standalone (Default) imports array.

    import { TooltipModule } from 'ngx-bootstrap/timepicker';
    
    @Component({
      standalone: true,
      imports: [TooltipModule,...]
    })
    export class AppComponent(){}