can't include 'ng2-bootstrap' external dependency

[zcsongor]

Tried to include ng2-bootstrap, but during building I got this message:

d:/Development/angular2-seed/node_modules/ng2-bootstrap/components/datepicker/da
te-formatter.ts(1,25): error TS2307: Cannot find module 'moment'.

[mgechev]

You need to install the type definitions for moment:

typings install moment --ambient --save

You may also need to install momentjs in case it is a peerDependency.

[zcsongor]

after installing momentjs & its type definition:

moment.d.ts (9,21): Cannot find namespace 'moment'

[zcsongor]

I almost have it: had to install without the flag --ambient.
But now I got this:

Error loading http://localhost:5555/node_modules/moment.js as "moment" from http://localhost:5555/node_modules/ng2-bootstrap/components/datepicker/date-formatter.js

ng2-boostrap do have a node_modules folder with moment in it, but it cannot find it.
Do I need a correct mapping here? If so, how?

[mgechev]

Now you need to configure systemjs in config.ts. Just set path to the momentjs bundle.

[zcsongor]

Right, still using SystemJS for dev, thanks!

[raoel]

Failed to load resource: the server responded with a status of 404 (Not Found)
2016-02-24 20:40:40.955 localhost/:70 Error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/moment.js(…) "Report this error at https://github.com/mgechev/angular2-seed/issues"(anonymous function) @ localhost/:70

I think this is the same issue.

npm install moment --save
typings install moment --save
(also tried with --ambient).

How do I configure systemjs in config.ts? DEV_NPM_DEPENDENCIES or PROD_NPM_DEPENDENCIES?
According to the wiki adding external packages should be a no-brainer, so is this a bug in angular2-seed/ng2-bootstrap or has it something to do with changes I made?

[NathanWalker]

@raoel you likely need this in tools/config.ts: (in part, just add moment like so)

const SYSTEM_CONFIG_DEV = {
  defaultJSExtensions: true,
  paths: {
    [BOOTSTRAP_MODULE]: `${APP_BASE}${BOOTSTRAP_MODULE}`,
    'angular2/*': `${APP_BASE}angular2/*`,
    'rxjs/*': `${APP_BASE}rxjs/*`,
    '*': `${APP_BASE}node_modules/*`,
    'moment': `${APP_BASE}node_modules/moment/moment`
  },
  packages: {
    angular2: { defaultExtension: false },
    rxjs: { defaultExtension: false }
  }
};

// you also need to add to production setup like this:
export const SYSTEM_BUILDER_CONFIG = {
  defaultJSExtensions: true,
  paths: {
    [`${TMP_DIR}/*`]: `${TMP_DIR}/*`,
    '*': 'node_modules/*',
    'moment': `node_modules/moment/moment.js`
  }
};

[alfakappa]

@raoel

In your system.js please tell system to look for moment.js as the default file. Moment is installed with some other js files as well.

valor-software/ngx-bootstrap#663 (comment)

There you go. Solved it for me.

[theotherdy]

@NathanWalker How does your solution map onto the new-look tools/config.ts which references tools/config/project.config.ts which extends tools/config/seed.config.ts?

In tools/config/project.config.ts I have:

this.NPM_DEPENDENCIES = [
       {src: 'ng2-bootstrap/*.js', inject: 'libs'},
       {src: 'moment/moment.js', inject: 'libs'},
    ];

but during npm run build.prod this still gives me:

Error on fetch for moment.js at file:///C:/[path shortened]/node_modules/moment.js
        Loading ng2-bootstrap/components/datepicker/date-formatter.js
        ...etc.

There doesn't seem to be any way to provide the 'map' solution that @raoel mentions....

[alfakappa]

Is it a possibility to work with SystemJS for you? There you can provide map paths.

[theotherdy]

Thanks @alfakappa - I was working with SystemJS in my dev environment and had ng2-bootstrap/moment working with the following in my systemjs.config.js:

EDIT: See note from @alphakappa below about this not being the right way to do it in case you've arrived here browsing for solutions!

(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',
    'ng2-bootstrap':              'node_modules/ng2-bootstrap',
    'moment':                     'node_modules/moment/moment.js'
  };
  // 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' },
    'ng2-bootstrap':              { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
  };

However I thought the angular2-seed looked as if it was going to give me the easiest route to building my project for deployment so have just spent all morning getting it working in this...and it doesn't seem to be using SystemJS?

Is there a 'map' equivalent in angular2-seed?

[alfakappa]

you should not use .js in your var map.

use it only in packages.

map is not correct when using a final path. packages just tells which file to start with (which is actually moment.js) but needs a reference path to include other files in moment.js. It will take it from map. if you make that a "moment.js" it will look for a folder moment.js (which does not exist)

take a look at the issue I referenced. It gives an exact systemjs config file which works fine.

[theotherdy]

Thanks @alfakappa - I've abandoned the SystemJS build now anyway, now that I have got it working and deployable in angular2-seed, but have edited my comment above for the benefit of those arriving here looking for solutions.

[crossme]

                                **>-------- Moment--------->**

Use these commands to add these dependencies to your package.json
npm install moment --save
Modify your System.config.js to the following code :

var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
moment: 'node_modules/moment/moment.js',
};

Then, U are good to go for moment.