问题
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?
回答1:
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.
回答2:
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]
})
回答3:
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..
回答4:
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!
回答5:
**>-------- 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.
回答6:
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'
}
回答7:
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
来源:https://stackoverflow.com/questions/34395030/angular2-cant-import-ng2-bootstrap