CODEWITHSUNDEEP
angularng2-bootstrap
mtahir08
mtahir08

Reputation: 87

Unable to get ng2-bootstrap

Here's my app.ts file:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

Here's my app.component.ts file:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
  selector: 'my-app',
  template:`
    <alert type="info">ng2-bootstrap hello world!</alert>
  `,
  directives: [Alert] 
})
export class AppComponent {
}

I get this error enter image description here

Upvotes: 3

Views: 2021

Answers (2)

Diego Unanue
Diego Unanue

Reputation: 6826

In case that someone still have the issue I use this config, just added the moment config in the app section of the System.config:

"node_modules/moment": {
                    defaultExtension: 'js'

      }

this is the complete System.config

System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                },
                "node_modules/ng2-bootstrap": {
                    defaultExtension: 'js'
                },
               //Added moment in app section
                "node_modules/moment": {
                    defaultExtension: 'js'
                }
            },
            paths: {
                "ng2-bootstrap/ng2-bootstrap": "node_modules/ng2-bootstrap/ng2-bootstrap",
                "angular_material/material": "node_modules/angular_material/material",
                "moment": "node_modules/moment/moment"
            }
        });

Upvotes: 0

Mohy Eldeen
Mohy Eldeen

Reputation: 1330

I got this to work by configuring my script in my index.html:

<script>
      System.config({
        packages: {       
          app: {
            format: 'register',
            defaultExtension: 'js'
          },
          "node_modules/ng2-bootstrap": {
              defaultExtension: 'js'
           }
        },
        paths: {
            "ng2-bootstrap/ng2-bootstrap":   "node_modules/ng2-bootstrap/ng2-bootstrap",
            "angular_material/material":   "node_modules/angular_material/material",
            "moment":   "node_modules/ng2-bootstrap/node_modules/moment/moment"
          }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

Also, do not forget to add the bootstrap style

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Upvotes: 2

Related Questions