angular - ngx-bootstrap doesn't support moduleless approach - Stack Overflow

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        

How do I solve this error?

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?

• angular
• typescript
• twitter-bootstrap
• ngx-bootstrap
• angular-standalone-components

Share Improve this question Follow edited Jan 31 at 10:11 Naren Murali 60.8k55 gold badges4444 silver badges8080 bronze badges asked Jan 28 at 17:45 safe_mallocsafe_malloc 89622 gold badges1313 silver badges3030 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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(){}