How to link your project with nightly Ionic2 sources

Ionic Framework ionic-v3
1

I’d like to start working with nightly.

Are there instructions for how to link to the nightly Ionic2 build from your Ionic2 app code development environment?

I tried the following, which almost works (getting some weird runtime/startup/bootstrapping errors right now, ignoring those errors for now and just asking whether this build process seems correct):

  • clone driftyco/ionic ; cd ionic ; npm install ; gulp build.release
  • cd to project (app) root directory
  • edit package.json to remove ionic-angular dependency and replace the dependencies section in your package.json to be the same as the dependencies section of the ionic repository’s package.json. (don’t forget to npm install after editing the file).
  • remove your project’s ./node_modules/ionic-angular directory and replace it with a link to the dist directory of the ionic repository you’ve just built. E.g, if you are at your project’s home directory and the Ionic source code repository is in ../ionic, then type /bin/rm -fr node_modules/ionic-angular; ln -s ../ionic/dist node_modules/ionic-angular

Does this series of steps to work/link with nightly in your project make sense?

Or is there a more correct way to do this?

Thanks!

2

Generally, npm link is the best way to deal with this. There are some issues; see this discussion.

1 Like
3

Thanks!

I had trouble with npm link as you described it in your post in this discussion. It created /usr/local/lib/node_modules/ionic2 instead of /usr/local/lib/node_modules/ionic-angular. Since I had to change that link manually to ‘ionic-angular’ (or else I would have had to change every ‘ionic-angular’ all over the code to ‘ionic2’) and since npm link just creates symlinks anyway, I created those symlinks manually via the original bullet list step at the top and it worked.

UPDATE:

So the problem is not the building and linking. It’s that some things don’t work after that step - tried it with both a fresh ionic start test-app tabs and with my own project - same problem:

I’m now getting an error that says

ORIGINAL EXCEPTION: No Directive annotation found on MyApp

where MyApp is the app’s main class name that gets bootstrapped - will look into this… unless somebody could please shed a light first.

4

I ran into that issue. It’s caused by two copies of Angular being included in the build. See here.

1 Like
5

Thanks very much for your reply. I saw the aliases, which seem to solve the problem, earlier, but did not know how to use them. I’ll post my question about them in that thread.

6

To get working with local builds, follow these steps

  1. Clone the repo

  2. run npm install inside the repo

  3. run gulp package build --typecheck
    this may take a while

  4. Copy the contents of ~ionic/dist/ into ~/path/to/app/node_modules/ionic-angular/

  5. Profit.

1 Like
7

Thanks very much @mharington!

The correct gulp command made all the difference…

But not until I also upgraded the packages - had to upgrade to rc.4 because @angular/forms does not exist in rc.3 and it complained.

I simply took one of the starter apps

ionic start testapp --v2 --ts

Then followed your instructions.

Then replaced the dependencies section of testapp/package.json with the dependencies section of the driftyco/ionic/package.json.

And it all worked! (after npm install of course)

1 Like