Angular2 + ng-bootstrap示例 [英] Angular2 + ng-bootstrap Example
问题描述
我开始学习Angular2,我想在我的项目中使用ng-bootstrap。但是,我无法做一个有效的项目。导入ng-bootstrap时失败。由于我是初学者,我不知道问题是由于代码还是其他我犯了错误。
I started to learn Angular2 and I want to use ng-bootstrap in my project. However, I could not make a working project. It fails on importing ng-bootstrap. Since I am a beginner, I don't know if the problem is because of the code or something other that I made wrong.
您能否为我提供一个使用ng-bootstrap和Angular2的简单项目,以便我可以尝试在我的计算机上运行它?
Can you provide me a working and simple project with ng-bootstrap and Angular2 so I can try to make it work on my computer?
编辑:
app.module.ts:
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { NgbdAlertCloseable } from './ngbd-alert-closeable.component';
@NgModule({
imports: [ NgbModule, BrowserModule ],
declarations: [ NgbdAlertCloseable, AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
systemjs.config.js:
systemjs.config.js:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'@ng-bootstrap': 'node_modules/@ng-bootstrap'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
var ngBootstrapPackageNames = [
'accordion',
'alert',
'bundles',
'buttons',
'carousel',
'collapse',
'dropdown',
'esm',
'modal',
'pagination',
'popover',
'progressbar',
'rating',
'tabset',
'timepicker',
'tooltip',
'typeahead',
'util'
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
function ngBootstrapPackIndex(pkgName) {
packages['@ng-bootstrap/ng-bootstrap/' + pkgName] = {main: 'index.js', defaultExtension: 'js'};
}
ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
错误:
推荐答案
我改变了
'ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }
在systemjs.config.js中的行
line in systemjs.config.js as
'@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }
它有效!
这篇关于Angular2 + ng-bootstrap示例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!