Reputation: 344
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?
Upvotes: 11
Views: 21162
Reputation: 1
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
Upvotes: 0
Reputation: 1
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'
}
Upvotes: 0
Reputation: 87
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!
Upvotes: 1
Reputation: 1204
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]
})
Upvotes: 7
Reputation: 1
**>-------- NG2BOOTSTRAP--------->**
Use these commands to add these dependencies to your package.json
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.
Upvotes: 0
Reputation: 914
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.
Upvotes: 7
Reputation: 1359
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..
Upvotes: 2