How to use ng-bootstrap in angular 4 or angular 2 with systemjs

Question

I want to use the styles and components defined in ng-bootstrap. I specifically want to use typeahead for my input boxes. I run in to a problem where I can't get ng-bootstrap to work in my angular 4 application using systemjs. How do I get the styles and components to apply to my html elements? I looked at this sof question but not helping me

My systemjs looks like:

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '/node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'app': 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

            'ng2-charts': 'npm:ng2-charts/bundles/ng2-charts.umd.js',
            'chart': 'npm:chart.js/dist/chart.js',

            'PieceLabel': 'npm:chart.piecelabel.js/src/chart.PieceLabel.js',


        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                defaultExtension: 'js',
                meta: {
                    './*.js': {
                        loader: 'systemjs-angular-loader.js'
                    }
                }
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

And my app.module looks like

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { APP_BASE_HREF } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ChartsModule } from 'ng2-charts';


import { AppComponent } from './app.component';
import { AppRoutingModule, routableComponents } from './app.routingModule';
const PieceLabel = require('node_modules/chart.piecelabel.js/src/Chart.PieceLabel.js');
@NgModule({
    imports:
    [
        BrowserModule,
        AppRoutingModule,
        HttpModule,
        FormsModule,
        ChartsModule,
        NgbModule.forRoot() 
    ],
    
    declarations:
    [
        AppComponent,
        routableComponents
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

checkout this plunker embed.plnkr.co/LvmpFxzCSRjlZCNU8Osm it might help but I still do not understand what is the reason not to use angular cli — angularconsulting.au
– angularconsulting.au, Commented Oct 3, 2017 at 22:58

Nageswara Rao Maridu · Accepted Answer · 2018-03-18 17:52:30Z

0

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap:

map: {
  '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
}

ng-bootstrap has a dependency with bootstrap(>4.0). So, install bootstrap 4 and import the bootstrap.min.css in your styles.css file.

answered Mar 18, 2018 at 17:52

Nageswara Rao Maridu

1571 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use ng-bootstrap in angular 4 or angular 2 with systemjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related