how to use ng2-datepicker for angular 2 app

Question

I want to include ng2-datepicker module in my application. I tried following as mentioned in the readme file.

npm install ng2-datepicker --save

modified systemjs.config.js file to:

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

added following line in index.html:

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

added following line in app.module.ts

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

I get following error when I load the application:

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

added following lines in app.module.ts import { DatePicker } from 'ng2-datepicker/ng2-datepicker'; declarations: [ AppComponent , DatePicker,] — Manohar, Oct 04 '16 at 07:48

score 1 · Answer 1 · answered Oct 08 '16 at 02:56

1

I might use a different compiler. But in my case, that is my map definition:

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

I am using system.js and mapping without the moment.js did it for me.

answered Oct 08 '16 at 02:56

MThi

323
2
5

I had the same issue using ng2-datepicker, I had to map 'moment' that way as well. – Kohen Holms Oct 08 '16 at 02:58

score 0 · Answer 2 · answered Jan 17 '17 at 17:25

//changes in 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'
      }

    }

how to use ng2-datepicker for angular 2 app

2 Answers2