Ngx-bootstrap: 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

[cquillen2003]

@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 [email protected] does not satisfy its siblings' peerDependencies requirements!
Error: The package [email protected] 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

[cquillen2003]

@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 [email protected]

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)

[cquillen2003]

@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.

[rolandoldengarm]

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

[crebuh]

@ashkank83 of course here are my settings:

system.config.ts

const map: any = {
'moment': 'vendor/moment/moment.js',
'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

angular-cli-build.js

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
    'ng2-bootstrap/**/*.js',
    'moment/moment.js'
    ]
});
};

app.component.ts

import { AlertComponent } from 'ng2-bootstrap/ng2-bootstrap'

did you also include moment.js?

*** Update: by @valorkin
I have updated import statement

[cescoferraro]

@crebuh it works, but I still need to import from ng2-bootstrap/ng2-bootstrap otherwise it would try to import index.js

and also had to edit the barrels, so the build system copy the files over to the dist folder when building

const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',
  'ng2-bootstrap',


  // App specific barrels.
  'app',
  'app/shared',
  /** @cli-barrel */
];

[valorkin]

@crebuh it works, but I still need to import from ng2-bootstrap/ng2-bootstrap otherwise it would try to import index.js

and this is correct, you should import from ng2-bootstrap/ng2-bootstrap not just ng2-bootstrap ( I am planning to add ng2-bootstrap/core ng2-bootstrap/datepicker later on, may be even as separate modules)

[kronok]

I feel like I'm really close to getting this working too, but I'm getting a
GET http://localhost:4200/vendor/ng2-bootstrap/ng2-bootstrap 404 (Not Found)

system-config.ts (just the important bits)

const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',
  'ng2-bootstrap',

  // App specific barrels.
  'app',
  'app/shared',
];

angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'rxjs/**/*.js',
      '@angular/**/*.js',
      'ng2-bootstrap/**/*.js',
      'moment/moment.js'
    ]
  });
};

Component

import { Component, OnInit } from '@angular/core';
import {AlertComponent} from 'ng2-bootstrap/ng2-bootstrap'

@Component({
  moduleId: module.id,
  selector: 'rec-navbar',
  templateUrl: 'navbar.component.html',
  styleUrls: ['navbar.component.css'],
  directives: [AlertComponent]
})
export class NavbarComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

If I add a '.js' to the 404 url error, it loads the js, so it seems to be distributing it over there just fine. There's no errors when coding in typescript, it's as if it's working perfectly. I can import and follow the link straight to the actual component. Any suggestions?

My project was started using angular-cli from about a week ago.

[rolandoldengarm]

I've got this in my barrels:

// Thirdparty barrels.
  'rxjs',
  'vendor/ng2-bootstrap',

Note the extra "vendor/"

[sqwk]

I am using 'ng2-bootstrap/**/*' and 'moment/moment.js' in my angular-cli-build.js and the following in the User Configuration part of system-config.ts:

const map: any = {
    'ng2-bootstrap': 'vendor/ng2-bootstrap',
    'moment': 'vendor/moment/moment.js'
};

const packages: any = {
    'vendor/ng2-bootstrap': {
        defaultExtension: 'js'
    }
};

Importing from ng2-bootstrap/ng2-bootstrap works fine .

[kronok]

Interestingly enough, both suggestions worked on their own. Thanks.

[GingerGeek]

So what's the idiot guide to do this then?

[jsonRUHLS]

I'm still getting this pesky error :

zone.js:101 GET http://localhost:4200/vendor/moment/index.js 404 (Not Found)
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/moment/index.js
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
        at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)

system-config.ts

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router-deprecated',

  // Thirdparty barrels.
  'rxjs',
  'moment',
   'vendor/ng2-bootstrap',

  // App specific barrels.
  'app',
  'app/shared',
  'app/landing',
  'app/+landing',
  'app/+route',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'moment': 'vendor/moment',
    'ng2-bootstrap': 'vendor/ng2-bootstrap',
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'rxjs/**/*.js',
      '@angular/**/*.js',
      'ng2-bootstrap/**/*.js',
       'moment/moment.js'

    ]
  });
};

Do any of you scholars, understand what might be triggering this? I have tried so many configurations.

[dessalines]

For moment in system-config.ts, i have

const map: any = {
    'bootstrap': 'vendor/bootstrap/dist/js/bootstrap.min.js',
    'moment': 'vendor/moment/moment.js',
    'markdown-it': 'vendor/markdown-it/dist/markdown-it.min.js',
    'autosize': 'vendor/autosize/dist/autosize.min.js',
    'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

[shmert]

@sqwk's instructions worked for me, which definitely qualifies it for _idiot's guide_ material.

angular-cli-build.js

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'ng2-bootstrap/**/*',
      'moment/moment.js'
    ]
  });
};

system-config.js

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages:any = {
  'vendor/ng2-bootstrap': {
      defaultExtension: 'js'
  }
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
[omitted...]

[cescoferraro]

@softEngJason you do not need a map for moment.js.
Just set the Systemconfig right away since it is a single file that you want

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'moment': 'vendor/moment/moment.js',

[yeshodhan]

Follow @rolandoldengarm instructions to the T.
do npm install moment --save event though it exists in node_modules.

[theunreal]

I have tried all instructions in this issue.. and i get this

zone.js:101 GET http://localhost:4200/vendor/ng2-bootstrap/ng2-bootstrap.js 404 (Not Found)

[valorkin]

can you try to use bundles? https://npmcdn.com/[email protected]/bundles/
I did them special for system.js users

[siulm]

I hope this helps, I have it working on :
angular-cli: 1.0.0-beta.9, node: 6.2.2, os: win32 x64 and angular 2.0.0-rc.4 and (typescript)
Two Things I have added in the "system-config.ts":
1) added '@angular/forms',
2) added the following line in order not to get the "vendor/ng2-bootstrap/index.js" error.
if (barrelName == 'ng2-bootstrap')
cliSystemConfigPackages[barrelName] = { main: 'ng2-bootstrap' };

The "angular-cli-bluid.js" remains as recommended above. I hope this helps.

cheers and thanks for your help.

system-config.ts:

/*******************************

• User Configuration.
  *******************************_/
  /_* Map relative paths to URLs. */
  const map: any = {
  };

/** User packages configuration. */
const packages: any = {

};

////////////////////////////////////////////////////////////////////////////////////////////////
/*******************************

• Everything underneath this line is managed by the CLI.
  ******************************/
  const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/forms',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

// Thirdparty barrels.
'rxjs',
'ng2-bootstrap'

// App specific barrels.

/** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
if (barrelName == 'ng2-bootstrap')
cliSystemConfigPackages[barrelName] = { main: 'ng2-bootstrap' };
else cliSystemConfigPackages[barrelName] = { main: 'index' };
});

console.log (cliSystemConfigPackages);
/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'ng2-bootstrap': 'vendor/ng2-bootstrap',
'moment': 'vendor/moment/moment.js',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

angular-cli-build.js:

// Angular-CLI build configuration

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist//.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata//_.+(ts|js|js.map)',
'rxjs/__/_.+(js|js.map)',
'@angular//.+(js|js.map)',
'ng2-bootstrap//*.js',
'moment/moment.js'
]
});
};

[valorkin]

@siulm ok, seems having index.js will help to system.js
I will add this in nearest release

[DavidTheProgrammer]

wow took a while but i finally got it to work, I ended up mixing and matching solutions until it worked.

Please ng-install

Please please make this installable via ng install. I dread people having to go through what i did, it would really put off newcomers

[whitewaves]

@DavidTheProgrammer good, please can you show how you got it to work code samples please

[DavidTheProgrammer]

@whitewaves okay so here goes (I'll assume you've already npm installed moment and ng2-bootstrap)..... good luck

So in the _angular-cli-build.js_ file add these two lines to the _vendorNpmFiles_ array

'moment/min/moment.min.js',
'ng2-bootstrap/**/*.+(js)'    

you're done in there, save and close.

now in _System.config.ts_ your map object should look like the one below, I've included the comments so that you know exactly where I am in the file

/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
    'moment': 'vendor/moment/min/moment.min.js',
    'ng2-bootstrap': 'vendor/ng2-bootstrap/ng2-bootstrap'
};  

so if you're wondering why I'm writing 'ng2-bootstrap': 'vendor/ng2-bootstrap/ng2-bootstrap' it's because I'm trying to avoid doing it when importing the module in my .ts files:

import { ... }  from 'ng2-bootstrap/ng2-bootstrap' 

The map object is simply a way to tell _system.js_ that hey when I import from ng2-bootstrap I mean this file vendor/ng2-bootstrap/ng2-bootstrap. This way your import statement looks clean unlike the alternative (aesthetics make the difference)

import { ... } from 'ng2-bootstrap'  

next up we add the files to packages (Note the comment to help you see where I am in the file)

/** User packages configuration. */
const packages: any = {
    // ng2-bootstrap packages
    'vendor/ng2-bootstrap': {
        defaultExtension: 'js'
    }
};

We then add the package to the barrels:

...
'@angular/platform-browser',
'@angular/platform-browser-dynamic',

// Thirdparty barrels.
'rxjs',
'ng2-bootstrap',
// App specific barrels.
...  

Annnndd presto. You should be done. The build will export the files to the _vendor_ folder and everything else should be smooth sailing..

Disclaimer

I'm working with Angular rc-3 and ng2-bootstrap ^1.0.24

[whitewaves]

@DavidTheProgrammer worked.

I'm working with Angular rc-4

[warmoose]

Followed all of the instructions provided by many contributors above.

For the life of me, I can't get the ng2-bootstrap files to load in the vendor directory.
Moment did, but the bootstrap files won't budge. If I manually copy them over, the next build erases them.

[DavidTheProgrammer]

@warmoose copying them manually won't help because the vendor files are compiled files from "src" so they will always get erased.

If your problem is getting the files to the vendor directory, then your issue is with the _angular-cli-build.js_ file, you might not be loading the files correctly, can i see your _vendorNpmFiles_ array in the angular-cli-build.js file?

[Phillippe43]

I've got the same problem as warmoose. I've followed all the examples above and cannot get ng2-bootstrap and moment to load in to the vendor directory. And there are no errors being displayed in the server or the browser.

[siulm]

I run into the same issue myself.

I followed the instructions and Removed the second "/ng2bootstrap".
Then it worked for me.

On Jul 27, 2016 12:56 PM, "Andre" [email protected] wrote:

I've got the same problem as warmoose. I've followed all the examples
above and cannot get ng2-bootstrap and moment to load in to the vendor
directory.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-bootstrap/issues/208#issuecomment-235649432,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABMWYBOkPbKVXyFUMhekwO7fz1z4ywN4ks5qZ42mgaJpZM4Heva4
.

[jspenc72]

@DavidTheProgrammer Thank you! It worked!

[zsfarkas]

Hey everybody,

i have actually found this official description, which worked for me :-)

https://github.com/angular/angular-cli/wiki/3rd-party-libs#adding-momentjs-library-to-your-project

[oscar6echo]

Has somebody installed and used ng2-bootstap with the new angular-cli@webpack ?

If so could you please share the equivalent changes mentionned above in

• ./src/system-config.ts
• ./angular-cli-build.js

for the new set of files as these two have disappeared in angular-cli@webpack.

Thx

[DavidTheProgrammer]

@oscar6echo I wish I could help you there buddy. webpack and systemjs are totally different in their bundling, so I couldn't even guess. I have never used webpack. good luck

[dlizarra]

@oscar6echo If I'm not mistaken with the new webpack version of angular-cli you just need to install the libraries as usual with npm and nothing else. Not any angular-cli config file and not even any file for webpack.

[valorkin]

done

[crossme]

                               >-------- NG2BOOTSTRAP--------->

Use these commands to add these dependencies to your package.json
1.npm install moment --save
2.npm install ng2-bootstrap --save
Modify your System.config.js to the following code as this map tells the System loader where to look for code.

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

var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'ng2-bootstrap': {defaultExtension: 'js' }
};
Add Bootstrap to your index.html

App.module.ts
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
And, add Ng2BootstrapModule to imports of @NgModule.

Then, U are good to go for ng2Bootstrap.

[jorgeas80]

Just check https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md