javascript - Angular2 + ng-bootstrap 示例

Question

我开始学习Angular2，我想在我的项目中使用ng-bootstrap。但是，我无法制作一个工作项目。导入 ng-bootstrap 失败。由于我是初学者，我不知道问题是因为代码还是其他我做错了。

您能否为我提供一个使用 ng-bootstrap 和 Angular2 的和简单工作项目，以便我可以尝试让它在我的计算机上工作？

编辑:

应用程序模块.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);

错误:

Answer 1

我改变了

'ng-bootstrap':       { main: 'index.js', defaultExtension: 'js' } 

在 systemjs.config.js 中作为

'@ng-bootstrap/ng-bootstrap':         { main: 'index.js', defaultExtension: 'js' }

成功了!