How to add ng-grid 3.x.x?

[tauren]

When I run jspm install github:angular-ui/ng-grid, version 2.0.13 is installed. I am trying to figure out how to create an override that will install version 3.0.0-rc.12. It looks like there is not a github release, so should I be doing a jspm install github:angular-ui/ng-grid@master? Even when I do that, there is no built file to reference. Assistance is appreciated, thanks!

https://github.com/angular-ui/ng-grid

[trusktr]

Just a first guess, but it seems that the github version won't work unless you do one of the following:

1. manually compile ng-grid after you install with jspm
2. write tricky amounts of meta properties (shims) for all the files so they are loaded in the proper order. You can start by defining main in your override to be that last file that needs to load, then make a shim for this file and list it's dependencies, then walk up the dependency tree, adding entries for all the other files (i.e. constants.js depends on bootstrap.js, and bootstrap.js is at the top of the dependency tree).
3. Hope that the feature in What about packages that need to be built? jspm-cli#160 gets implemented, then add the build config to your package override. @guybedford :D
4. Use the npm endpoint.
5. Use the bower endpoint, if it exists (I didn't check)

You're in luck. You can use the npm endpoint because the NPM version of ng-grid ships with everything all built for you in the build folder. The bower version if it exists might also have things pre-built, but to use a bower endpoint with jspm you'll need to install jspm-bower.

For the npm endpoint option, use an override something along the lines of:

{
  "main": "build/ng-grid",
  "dependencies": ["angular"],
  "shim": {
    "build/ng-grid": {
      "deps": ["angular"]
    }
  }
}

Then after you've installed it from the npm endpoint using that override, you can

import "ng-grid";

or

require("ng-grid");

depending on which module loading style you're using.

[tauren]

Thanks for the help, but I believe the version in npm is 2.0.1 and was last updated 2 years ago. It looks like I'll have to take one of the other routes.

I believe that jspm-bower is not maintained and is probably out-of-date since the recent jspm endpoint API changes. Until jspm-bower is updated, I'm not sure it is a viable solution, even though I believe ng-grid@3.0.0-rc.12 is available via bower.

I assume it currently is not possible to run npm install; grunt build as a jspm postinstall script? This would mean downloading the full repo.

It may be easier to just download and build this dependency and manually put it into my project instead of installing it via jspm.

[guybedford]

This is because of https://github.com/angular-ui/ng-grid#how-can-i-test-30.

I managed to dig a little deeper and if you follow the repository in the bower.json it takes you to this repo - https://github.com/angular-ui/ui-grid.info/tree/v3.0.0-rc.12.

So you should be able to do jspm install angular-ui/ui-grid.info@3.0.0-rc.12.

[guybedford]

Closing for now, updates on this welcome.

[trusktr]

@guybedford Just wanted to point out here (and that @tauren mentioned) jspm post install scripts to the rescue.

[MikeJoyce19]

I was able to install newest RC of ui-grid using @guybedford s suggestion above, however I imagine I need to provide a override to point to the main file similar to what @trusktr suggested?

Any update on how to integrate this library using jspm?

[guybedford]

@MikeJoyce19 yes exactly, I'd suggest following an example override like https://github.com/jspm/registry/blob/master/package-overrides/github/angular-translate/bower-angular-translate%402.5.2.json for installing this. You can create that file locally and then install via jspm install angular-ui/ui-grid.info@3.0.0-rc.12 -o override.json. Just let me know if you need further assistance.

[MikeJoyce19]

Thanks @guybedford I actually just had that moment of clarity where overrides and all that make complete sense!

[nlwillia]

Has anyone gotten this to work recently?

jspm install npm:angular-ui-grid fails with:

     Looking up npm:angular-ui-grid
     Updating registry cache...
     Downloading npm:angular-ui-grid@3.1.1

warn Error on processPackageConfig
     ReferenceError: ui is not defined
         at NPMLocation.processPackageConfig (C:\WCTK-CVE\workspace\Stores\WebProjects\teststudentinfo\node_modules\jspm-npm\lib\npm.js:274:7)
         at C:\WCTK-CVE\workspace\Stores\WebProjects\teststudentinfo\node_modules\jspm\lib\registry.js:117:30
         at lib$rsvp$$internal$$tryCatch (C:\WCTK-CVE\workspace\Stores\WebProjects\teststudentinfo\node_modules\rsvp\dist\rsvp.js:1036:16)
         at lib$rsvp$$internal$$invokeCallback (C:\WCTK-CVE\workspace\Stores\WebProjects\teststudentinfo\node_modules\rsvp\dist\rsvp.js:1048:17)
         at C:\WCTK-CVE\workspace\Stores\WebProjects\teststudentinfo\node_modules\rsvp\dist\rsvp.js:331:11
         at lib$rsvp$asap$$flush (C:\WCTK-CVE\workspace\Stores\WebProjects\teststudentinfo\node_modules\rsvp\dist\rsvp.js:1198:9)
         at nextTickCallbackWith0Args (node.js:419:9)
         at process._tickCallback (node.js:348:13)

warn Error processing package config for npm:angular-ui-grid.

err  Error processing package config for npm:angular-ui-grid.

warn Installation changes not saved.

And the github versions are not built, so there's nothing to shim unless you manually build. Is that still the best approach?

[guybedford]

@nlwillia thanks that's a bug I've fixed in jspm/npm@681a964 pending release.

[nlwillia]

Thanks! After merging the warning fix in my local jspm, I was able to get this working with:

jspm install npm:angular-ui-grid -o "{main: 'ui-grid.min', shim: { 'ui-grid.min': { deps: ['./ui-grid.min.css!']}}, dependencies: { 'angular': '*' }}"

[guybedford]

@nlwillia thanks for the update. If you'd like to check that into the registry a PR here is always welcome.

[nlwillia]

On reviewing this, I realized that I missed the fact that what's in the registry is not github:angular-ui/ui-grid, but github:angular-ui/bower-ui-grid. That project has the policy of deploying to both npm and a parallel bower- github project, so the current registry binding should work with the exception that they've chosen to not shim in the css dependency.