make ng2-bootstrap compatible with angular-cli

[xmlking]

Can you make ng2-bootstrap easy to install with angular-cli ?
e.g., ng install ng2-bootstrap

Making 3rd party libraries compatible with angular-cli:
https://github.com/angular/angular-cli/blob/master/docs/ng-install.md

example compatible 3rd party libraries: ng2-jwt, ng2-uploader, ng2-slimscroll, ng2-translate

I guess you have to change "main": "ng2-bootstrap.js" --> "main": "ng2-bootstrap.ts" in package.json

[valorkin]

@NathanWalker was up to speed with this, but I will check it too

[csquillen]

@valorkin @NathanWalker Any update on using ng2-bootstrap with angular-cli?

The angular team is very much committed to the CLI tool according to their meeting notes and the beta announcement blog post.

[NathanWalker]

@cquillen2003 I just tried this with latest angular-cli 0.0.25 and I received this error:

The package angular2@2.0.0-beta.9 does not satisfy its siblings' peerDependencies requirements!
Error: The package angular2@2.0.0-beta.9 does not satisfy its siblings' peerDependencies requirements!

Let me know if you receive a different error.
I'll look into satisfying that dependency.

/cc @valorkin

[csquillen]

@NathanWalker I just tried npm installing ng2-bootstrap on a new Angular-CLI app (v0.0.25). I did not get the exact error above, but I did get the following error:

UNMET PEER DEPENDENCY angular2@2.0.0-beta.9

Also, I tried following these readme instructions:

System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
moment: 'node_modules/moment/moment.js'
}
});

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@component({
selector: 'my-app',
directives: [Alert],
template: <alert type="info">ng2-bootstrap hello world!</alert>
})
export class AppComponent {
}

But I keep getting this error:

GET http://localhost:4200/node_modules/moment/moment.js 404 (Not Found)

[csquillen]

@NathanWalker Have you had a chance to try ng2-bootstrap with Angular-CLI again? I've tried multiple times but I'm stuck. This project could really use Angular-CLI instructions in the Readme IMO.

I've got it working!

1. npm install moment --save
2. npm install ng2-bootstrap --save
3. add to vendorNpmFiles in angular-cli-build.js:

'ng2-bootstrap/**/*.js',
'moment/moment.js'

1. my system.config in index.html looks like:

System.config({      
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        },
        'vendor/ng2-bootstrap': {
          defaultExtension: 'js',           
        }
      },
      map: {
        moment: 'vendor/moment/moment.js',
        'ng2-bootstrap': 'vendor/ng2-bootstrap/ng2-bootstrap.js'
      }
    });

[crebuh]

@rolandoldengarm

thx for your guide, I tried excactly the same, without sucess. in the console I got the following error:

 zone.js:461 Unhandled Promise rejection: ReferenceError: require is not defined

    at eval (http://localhost:4200/app/index.js:5:10)

    at eval (http://localhost:4200/app/index.js:8:3)

    at ZoneDelegate.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:323:29)

Evaluating http://localhost:4200/app/index.js

Error loading http://localhost:4200/app/index.js as "./app" from http://localhost:4200/main.js ; 

Zone: <root> ; Task: Promise.then ; Value: Error: ReferenceError: require is not 

defined(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ 

zone.js:494ZoneTask.invoke @ zone.js:426

zone.js:463 Error: Uncaught (in promise): Error: ReferenceError: require is not defined(…)

does anybody has the same problems?

edit

now it is working, instead of putting the system.config settings into the index.html, I had to put all of the stuff into the system-config.ts. big thx!

[valorkin]

seems you have require somewhere
usually it is a webpack feature to use
system.js doesn't (or should not) knew how to handle it

[crebuh]

@valorkin

thanks! as I said or edited my post before, i had to put all of the stuff into the system-config.ts instead of directly into the index.html

[ashkank83]

I'm getting the exact same error as @crebuh. @crebuh : Would you please share your system-config.ts file? I tried to move the code block to system-config.ts as well and getting the same error!

The initial System-config.ts has
/** Map relative paths to URLs. */ const map: any = { //'ng2-bootstrap': 'vendor/ng2-bootstrap/bundles/ng2-bootstrap.min.js' };

and I tried adding it there as well but no joy. Thanks

[valorkin]

I will try to get it working tomorrow