angular2 can't import ng2-bootstrap

Question

I can't import ng2-bootstrap

layout.jade

html
 head
title Angular 2 QuickStart
// 1. Load libraries

script(src="/node_modules/angular2/bundles/angular2-polyfills.js")
script(src="/node_modules/systemjs/dist/system.src.js")
//script(src="/node_modules/ng2-bootstrap/ng2-bootstrap.js")
script(src="/node_modules/rxjs/bundles/Rx.js")
script(src="/node_modules/angular2/bundles/angular2.dev.js")

// 2. Configure SystemJS
script.
  System.config({
      packages: {
         app: {
            //format: 'register',
            //defaultExtension: 'js',
            defaultJSExtensions: true
        }
      },
          paths: {
          'ng2-bootstrap/*': 'node_modules/ng2-bootstrap/*.js'
          }
  });
  System.import('app/boot')
  .then(null, console.error.bind(console));
// 3. Display the application
body
    my-app Loading...

express

 app.use('/node_modules', express.static(__dirname + '/node_modules'));

app.component.ts

 //import "ng2-bootstrap/ng2-bootstrap";

   import {Component} from 'angular2/core';
   import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
   import {firstComponent} from './component/first.component';

   @Component({
     //directives: [Alert],
      directives: [firstComponent,Alert],
      selector: 'my-app',
      template: `
        <h1>My First Angular 2 App</h1>
        <h2> helllo</h2>
        <first></first>
        <alert type="info">ng2-bootstrap hello!</alert>
        `
    })
    export class AppComponent { }

error console

GET http://localhost:3000/node_modules/ng2-bootstrap/components/accordion/accordion 404 (Not Found)

Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-

and also more errors the same as that re: cannot import component?

ng2-bootstrap, was renamed to ngx-bootstrap

valorkin
– valorkin

2017-09-13 09:00:00 +00:00
Commented Sep 13, 2017 at 9:00 — valorkin
– valorkin, Commented Sep 13, 2017 at 9:00

Aivus · Accepted Answer · 2016-07-27 08:06:03Z

7

I had the same issue myself and found this link helpful: https://github.com/valor-software/ng2-bootstrap/issues/50#issuecomment-165448962

A snippet of the most relevant code:

System.JS config:

System.config({
   packages: {
     "app": {
        "defaultExtension": "js"
     },
     "node_modules/ng2-bootstrap": {
        "defaultExtension": "js"
     }
  },
  paths: {
    "ng2-bootstrap":   "node_modules/ng2-bootstrap"
  }
});

You can then simply import it like so:

import { Progressbar } from "ng2-bootstrap";
@Component({
    selector: "my-app",
    directives: [
        Progressbar
    ],
    template: "<progressbar></progressbar>" 
})

Hope this helps you, like it did to me.

edited Jul 27, 2016 at 8:06

Aivus

5225 silver badges17 bronze badges

answered Dec 31, 2015 at 13:05

Wobbley

9141 gold badge12 silver badges28 bronze badges

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

2 Comments

antonio Over a year ago

Hi, I'm using webpack, where can I find the System.JS file?

Edric Over a year ago

@antonio It's named system-config.ts

Baradwaj Aryasomayajula · Accepted Answer · 2016-11-15 22:53:56Z

7

This worked for me. Under the systemjs.config file:

map: {
'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
       'moment': 'node_modules/moment/moment.js'
    }

We need to mention the 'moment' because ng2-bootstrap is importing moment.

And in the app.modules, just do the following:

import {DatepickerModule} from 'ng2-bootstrap';

And also the following:

@NgModule({
    imports: [
        ....,
        ....,
        DatepickerModule
    ],
    declarations: [...],
    providers: [...],
    bootstrap: [AppComponent]
})

answered Nov 15, 2016 at 22:53

Baradwaj Aryasomayajula

1,2041 gold badge18 silver badges42 bronze badges

1 Comment

ajaysinghdav10d Over a year ago

great analysis, adding moment and keeping the rest of the lines as it is helped me.

11mb · Accepted Answer · 2016-02-11 21:33:08Z

I do not think the current answers are satisfactory since they do fighting symptoms and do not solve the underlying problem.

What I did to solve this:

System.config({
    baseURL: '/node_modules',
    "defaultJSExtensions": true,
    map: {
      app: '/app/'
    }
    paths: {
      "moment":   "moment/moment"
    }
  });

Line 1: So I set node_modules my base url, so I don't have to rewrite every import on a package by package basis.

Line 2: Then I tell systemjs to look for JS files by default.

Line 3 - 5: I map everything that starts with app to the app directory. So SystemJs won't try to find my own files in the /node_modules folder.

Finished.

On Line 6 - 7 One 'bugfix' had to be done when SystemJS tried to load momentjs directly from /node_modules/, so i set it to its own directory. Weird..

osazemeu · Accepted Answer · 2017-02-24 16:35:50Z

1

I am using the latest version of angular-cli 2.4.7 (webpack) and was able to get it to work.

Run this in your angular app

npm install ng2-bootstrap bootstrap moment --save

Open the following files and add them as listed

Insert a new entry into the styles array

  # angular-cli.json
  "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ]

Import desired module

# src/app/app.module.ts
...
import { DatepickerModule } from 'ng2-bootstrap';
...
@NgModule({
....
,
  imports: [
DatepickerModule.forRoot(),
...
]
...})

And you are good to go!

answered Feb 24, 2017 at 16:35

osazemeu

872 silver badges11 bronze badges

Comments

Mohit Sonkar · Accepted Answer · 2016-11-01 05:41:05Z

0

                        **>-------- NG2BOOTSTRAP--------->**

Use these commands to add these dependencies to your package.json

npm install moment --save
npm install ng2-bootstrap --save

Modify your System.config.js to the following code as this map tells the System loader where to look for code.

var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
     moment:              'node_modules/moment/moment.js',
    'ng2-bootstrap':              'node_modules/ng2-bootstrap',
  };

var packages = {
    'app':                        { main: 'main.js',    defaultExtension: 'js' },
    'ng2-bootstrap':          {defaultExtension: 'js' }
  };

Add Bootstrap to your index.html <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

App.module.ts import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap'; And, add Ng2BootstrapModule to imports of @NgModule.

Then, U are good to go for ng2Bootstrap.

answered Nov 1, 2016 at 5:41

Mohit Sonkar

11 bronze badge

1 Comment

antonio Over a year ago

Hi, I'm using webpack, where can I find the System.config.js file?

Amit Joshi · Accepted Answer · 2017-03-17 06:44:23Z

0

In systemjs.config.js packages variable, add the following for the fix the issue

'ng2-bootstrap':
{
    format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js'
}

edited Mar 17, 2017 at 6:44

Amit Joshi

16.6k23 gold badges88 silver badges154 bronze badges

answered Mar 17, 2017 at 4:25

P.R.Sujoy

1

Comments

P.R.Sujoy · Accepted Answer · 2017-03-17 07:08:44Z

0

update the systemjs.config.js package variable with the following and error will be gone 'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },// AND THIS

answered Mar 17, 2017 at 7:08

P.R.Sujoy

1

Collectives™ on Stack Overflow

angular2 can't import ng2-bootstrap

7 Answers 7

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related