NgbModule.forRoot() giving error "Property 'forRoot' does not exist on type 'typeof NgbModule'.ts"

Question

I want to add Bootstrap modal to my Angular Project. So I installed ng bootstrap using "npm install --save @ng-bootstrap/ng-bootstrap" and then bootstrap using "npm install bootstrap@4.5.2".

When I add this sentence "NgbModule.forRoot()" under imports in app.module.ts it gives an error "Property 'forRoot' does not exist on type 'typeof NgbModule'."

I however tried to remove forRoot() and imported only NdbModule and ran my application. But it gives the following error

enter image description here

When I searched online about how to remove the above error, the solution I got is to add forRoot(). But it is giving error "Property 'forRoot' does not exist on type 'typeof NgbModule'."

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

login.component.ts:

import { Component, OnInit } from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  title = 'appBootstrap';
  
  closeResult: string;
  
  constructor(private modalService: NgbModal) {}
    
  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }
  
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }

  ngOnInit() {
    
  }
}

login.component.html:

<h1>Modal Popup Example</h1>
   
<button class="btn btn-lg btn-outline-primary" (click)="open(mymodal)">Open My Modal</button>
   
<ng-template #mymodal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Bootstrap Modal</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="modal-body">
    This is a sample modal
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
  </div>
</ng-template>

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Testproject</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Angular Version: Angular CLI: 8.0.6 Node: 12.19.0 OS: win32 x64 Angular: 8.0.3

This is the first time I am posting a question in Stackoverflow. Please suggest if I missed any details.

Answer 1

Seems to be a compatibility issue between Angular, Bootstrap and NgBootstrap. Please ensure you're using the correct dependencies as per NgBootstraps documentation

Answer 2

I had the same issue while trying to install bootstrap for my angular project created using angular/cli

I followed the 'manual installation' method mentioned in https://ng-bootstrap.github.io/#/getting-started (Click on the link "Click here to hide detailed instructions" for step by step instructions)

The main thing is checking the dependencies - ng bootstrap dependencies

Explanation of what I did:

As mentioned here( ng bootstrap dependencies ), for Angular 10, the dependencies are ng-bootstrap - 8.xx and Bootstrap CSS - 4.5.0
```
 npm install bootstrap@4.5.0 npm install @ng-bootstrap/ng-bootstrap@8.0.0
```
Note: Use --legacy-peer-deps switch if you get dependency errors
Since I was using SCSS, added the below line in src/styles.scss
```
@import "~bootstrap/scss/bootstrap";
```
Add ng-localize
```
 ng add @angular/localize
```
Regarding the NgbModule.forRoot() , I can confirm that it is not required in newer versions of ng-bootstrap(I tried 8.0.0) as I have got bootstrap working in my angular project without it as shown below:
file: app.module.ts
```
 import {NgbModule.NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations:[AppComponent], imports: [NgbModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
```

NgbModule.forRoot() giving error "Property 'forRoot' does not exist on type 'typeof NgbModule'.ts"

Question

2 answers

solution1
1 2020-11-20 04:49:50

solution2
1 2021-05-20 18:44:35

NgbModule.forRoot() giving error "Property 'forRoot' does not exist on type 'typeof NgbModule'.ts"

Question

2 answers

solution1 1 2020-11-20 04:49:50

solution2 1 2021-05-20 18:44:35

solution1
1 2020-11-20 04:49:50

solution2
1 2021-05-20 18:44:35