如何使用ng2-datepicker for angular 2應用程序

Question

我想在我的應用程序中包含ng2-datepicker模塊。我嘗試了自述文件中提到的以下內容。

npm install ng2-datepicker --save 

改性systemjs.config.js文件：

.map { 
'ng2-datepicker': 'npm:ng2-datepicker', 
     'moment': 'npm:moment/moment.js' 
} 
    'ng2-datepicker': { 
      format: 'register', 
     defaultExtension: 'js' 
     } 

添加下列行index.html中：

<script src="node_modules/moment/moment.js"></script> 

加入以下在app.module.ts線

import { DatePicker } from 'ng2-datepicker/ng2-datepicker'; 
declarations: [ AppComponent , 
       DatePicker] 

我得到以下錯誤，當我加載應用：

Error: ReferenceError: require is not defined 
     at eval (http://localhost:3000/node_modules/ng2-datepicker/ng2-datepicker.js:2:24) 
     at eval (http://localhost:3000/node_modules/ng2-datepicker/ng2-datepicker.js:7:3) 
     at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:203:28)  
      Evaluating http://localhost:3000/node_modules/ng2-datepicker/ng2-datepicker.js 
      Error loading http://localhost:3000/node_modules/ng2-datepicker/ng2-datepicker.js as "ng2-datepicker/ng2-datepicker" from http://localhost:3000/app/app.module.js 

Answer 1

我可能使用不同的編譯器。 但於我而言，這是我的地圖定義：

var map = { 
    ... 
    'ng2-datepicker':    'app-ui/node_modules/ng2-datepicker', 
    'moment':      'app-ui/node_modules/moment', 
    ... 
}; 

我使用system.js和映射沒有moment.js爲我做。

Answer 2

//改變systemjs.config.js

map: { 
// our app is within the app folder 
      app: 'app', 
      'angular2-moment': 'npm:angular2-moment', 
      'moment': 'npm:moment', 
      'ng2-slimscroll': 'npm:ng2-slimscroll', 
      'ng2-datepicker': 'npm:ng2-datepicker', 
     } 

// packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     'angular2-moment': { 
     main: './index.js', 
     defaultExtension: 'js' 
     }, 
     'moment': { 
     main: './moment.js', 
     defaultExtension: 'js' 
     }, 
     'ng2-slimscroll': { 
     main: './ng2-slimscroll.js', 
     defaultExtension: 'js' 
     }, 
     'ng2-datepicker': { 
     // format: 'register', 
     main: './ng2-datepicker.js', 
     defaultExtension: 'js' 
     } 

    }