Angular2 + ng-bootstrap Beispiel
Ich habe angefangen, Angular2 zu lernen und ich möchte ng-bootstrap in meinem Projekt verwenden. Ich konnte jedoch kein funktionierendes Projekt machen. Beim Import von ng-bootstrap schlägt dies fehl. Da ich Anfänger bin, weiß ich nicht, ob das Problem am Code oder an etwas anderem liegt, das ich falsch gemacht habe.
annst du mir ein funktionierendesnd einfa Projekt mit ng-bootstrap und Angular2, damit ich versuchen kann, es auf meinem Computer zum Laufen zu bringen?
Bearbeiten
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:
/**
* 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);
Error