angular4- Do i need to install ng-bootstrap if i created project using bootstrap 4 alpha theme

Question

I am using SB-Admin-BS4-Angular-4-master theme in angular4. Theme has link to https://v4-alpha.getbootstrap.com/ I want to use bootstrap modals in my code. I used modals as per documentation in the theme.

For the same i used

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

in app.module.ts

Then i had to install ng-bootstrap via npm as it was not working.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

When i installed ngbootstrap, webpack was being removed..

Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

I installed webpack again as per Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

Now i am getting error this error when i open that module where i have used modal code..

 Error: Uncaught (in promise): Error: No provider for NgbModalStack!
injectionError@http://localhost:4200/vendor.bundle.js:58005:90
noProviderError@http://localhost:4200/vendor.bundle.js:58043:12
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype._throwOrNull@http://localhost:4200/vendor.bundle.js:59485:19
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype._getByKeyDefault@http://localhost:4200/vendor.bundle.js:59524:20
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype._getByKey@http://localhost:4200/vendor.bundle.js:59456:20
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype.get@http://localhost:4200/vendor.bundle.js:59325:16
resolveNgModuleDep@http://localhost:4200/vendor.bundle.js:66317:12
_createClass@http://localhost:4200/vendor.bundle.js:66363:113
_createProviderInstance$1@http://localhost:4200/vendor.bundle.js:66328:26
resolveNgModuleDep@http://localhost:4200/vendor.bundle.js:66313:17
../../../core/@angular/core.es5.js/</N…
Stack trace:
resolvePromise@http://localhost:4200/polyfills.bundle.js:6634:31
resolvePromise@http://localhost:4200/polyfills.bundle.js:6605:17
scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:6683:17
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6264:17
onInvokeTask@http://localhost:4200/vendor.bundle.js:60717:24
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6263:17
../../../../zone.js/dist/zone.js/</</Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:6031:28
drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:6441:25
../../../../zone.js/dist/zone.js/</</ZoneTask.invokeTask@http://localhost:4200/polyfills.bundle.js:6342:21
invokeTask@http://localhost:4200/polyfills.bundle.js:7266:9
globalZoneAwareCallback@http://localhost:4200/polyfills.bundle.js:7284:17
  core.es5.js:1020

Do i need to install ng-bootstrap if i am already using a bootstrap theme to use bootstrap components?

HTML code

<div class="tableinfowrap">
  <div class="card-header">
      <div class="row">
        <div class="col-xl-10"><h3>Tables</h3></div>
        <div  class="col-xl-2"> <a class="btn btn-primary" [routerLink]="['addresttable']" role="button">Add Table</a> </div>
      </div>

  </div>
<table class="card-block table table-hover">
  <thead>
  <tr>
    <th>Table Number</th>
    <th>Sitting Capacity</th>
    <th>QR Code Url</th>
    <th></th>
    <th></th>
  </tr>
</thead>
<tbody *ngFor="let table of tablelist" >
<tr>
<td>{{table.tableNumber}}</td>
<td>{{table.seatingCapacity}}</td>
<td>{{table.qrCodeUrl}}</td>
<td ><i class="fa fa-fw fa-edit"></i></td>
<td (click)="open(content)"><i class="fa fa-fw fa-trash"></i></td>
</tr>
</tbody>
</table>


<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>
</div>

.ts file code

import { Component, OnInit } from '@angular/core';
import { Router, RouterModule} from '@angular/router';
import { routerTransition } from '../../router.animations';
import { plainToClass } from 'class-transformer';
import { classToPlain } from 'class-transformer';
import {FormsModule} from '@angular/forms';
import {TablesbyResId, ResTablesData} from '../../model/TablesbyResId';
import {TablebyResIdService} from '../../services/TablebyResIdService.service';
import { NgbModule, NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-tableinfo',
  templateUrl: './tableinfo.component.html',
  styleUrls: ['./tableinfo.component.scss'],
  providers: [TablebyResIdService ,NgbModal]
})
export class TableinfoComponent implements OnInit {
  tablelist: ResTablesData[];
  deletemodal = false;
  message: boolean;
  closeResult: string;
  constructor(public router: Router, public tablebyresidservice: TablebyResIdService, private modalService: NgbModal) { }

  ngOnInit()
  {
    this.tablebyresidservice.getTablebyIdApi()
    .subscribe(
      res =>
          {
              const tableResponse = plainToClass(TablesbyResId, res as Object)
              console.log(tableResponse);
              if (res.error === true){
              alert(res.message);
              console.log(res.message);
              console.log(res.statusCode);
              console.log(res.error);
              /* this.router.navigate(['/login']); */
          }
              else
              {
                console.log("api hit success");
                this.tablelist = tableResponse.data;
              }
      },
       error => {this.tablebyresidservice.throwError(error);},
       () => {}
      );
  }


   open(content) {
    this.modalService.open(content).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}`;
    }
}
}

have you tried adding bootstrap itself instead of ng-bootstrap? `npm install bootstrap --save`? — mast3rd3mon, Oct 31 '17 at 11:23
yeah, not sure if `npm install bootstrap --save` installs v4 yet but if not, just specify the beta version of 4 — mast3rd3mon, Oct 31 '17 at 11:27
yes it installs bootstrap@4.0.0-alpha.6 modified error..please have a look — Rajat Gupta, Oct 31 '17 at 11:55
the alpha isnt the same as the beta but its still good enough, you then need to import the bootstrap css files in your styles.css/styles.scss file `@import "~bootstrap/dist/css/bootstrap.min.css";` — mast3rd3mon, Oct 31 '17 at 11:57
i have styles folder with bootstrap files in it as i am using theme — Rajat Gupta, Oct 31 '17 at 12:01

Hareesh · Answer 1 · 2017-11-01T13:21:42.160

0

You need to install ng-bootstrap if you want your modal in Angular way. And your theme uses it.

While going through similar problems this NgbModule.forRoot() seems to be the fix.

But if that not help you, i saw this error Uncaught (in promise) in your log. may be using ModalDismissReasons.

In my project i used NgbModalRef you can try below code.

your import look like this import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';

define modalReference: NgbModalRef; in your class TableinfoComponent

now this is how your open(content) look

open(content) {
    this.modalReference = this.modalService.open(content);
    this.modalReference.result.then((result) => {
      console.log(result);
    });
}

remove all other code including getDismissReason and try.

works for me, hope this will help you.

edited Nov 01 '17 at 13:21

answered Oct 31 '17 at 13:44

Hareesh

6,770
4
33
60

i created project by bootstrap theme as mentioned in question and demo modal in working in other module – Rajat Gupta Oct 31 '17 at 13:50
theme is based on alpha version – Rajat Gupta Oct 31 '17 at 13:59
your theme has `NgbModalStack` which is not yet supported in `ng-bootstrap` check this [link](https://github.com/ng-bootstrap/ng-bootstrap/issues/643) – Hareesh Oct 31 '17 at 14:00
please provide your themes doc link – Hareesh Oct 31 '17 at 14:01
i checked github repo. your theme not using `ng-bootstrap` or `ngx-bootstrap`. [link](https://github.com/start-angular/SB-Admin-BS4-Angular-4/blob/master/src/app/app.module.ts) – Hareesh Oct 31 '17 at 14:20
post some more related code, how you implemented modal. and relevant package.json info – Hareesh Oct 31 '17 at 20:17
You don't need to import NgbModule in your ts file. – Hareesh Nov 01 '17 at 08:54

score -1 · Answer 2 · answered Oct 31 '17 at 11:54

ng-bootstrap is a series of widgets that use bootstrap4.0.css. When we install ng-bootstrap we need ONLY the bootstrap.min.css.

npm install --save @ng-bootstrap/ng-bootstrap

We can download bootstrap.min.css and, e.g. if we are using angular-cli modified the "styles" tag in angular-cli.json

"styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
      ],

bootstrap is a series of widgets + bootstrap.css. When we install bootstrap we don't need import bootstrap.min.css

npm install bootstrap@4.0.0-beta.2

Both them have modals

i am already using SB-Admin-BS4-Angular-4 (bootstrap theme) i created new project on this theme do i need to install ng-bootstrap or ngx-bootstrap?? — Rajat Gupta, Oct 31 '17 at 11:58

angular4- Do i need to install ng-bootstrap if i created project using bootstrap 4 alpha theme

2 Answers2