How can I use npm with a cordova app in visual studio

Question

I'm trying to write a hybrid app using the "Tools for Apache Cordova" visual studio project template. In order to use angular2 I have added the required modules to packages.json.

Once I have compiled everything and fixed any other missing packages, the app refuses to load angular, presumably because the the packages are all the in the '~/nodes_module' folder while the website files are in the 'www' folder.

I have the same problem whether I load the sample (https://github.com/dbiele/TypeScript-Cordova-SystemJS-Angular2-beta) or follow the angular quickstart (https://angular.io/guide/quickstart).

I'm sure I'm doing something fundamentally wrong with respect to how a hybit app should be packaged. Help will be greatly appreciated.

I'm using visual Studio Community 2015. I updated node and npm to the latests version and updated the path in visual studio so it can find them.

Answer 1

You miss just a little piece: you need a task for copying the needed scripts into your www folder. I would recommend to use a Gulp task, which you can invoke from Visual Studio's Task Runner.

Never install the npm packages direct into the www folder. In this way you get too much files, which increase your app's size unnecessary. This approach works for server applications, but not for mobile apps.

I, personally, would also recommend to use Ionic2. Not only is it a great framework for mobile apps, additionally it provides you a working gulpfile.

Answer 2

If you are interested in using Angular2 with Cordova, I highly recommend using the Ionic framework. Ionic2 is in beta and uses Angular2 (installation instructions here: http://ionicframework.com/docs/v2/getting-started/installation/) whereas the original Ionic framework is stable, but uses Angular 1 (http://ionicframework.com/getting-started/).

The benefits of Ionic are numerous:

• Knowledgeable community (https://forum.ionicframework.com/)
• Large library of plugins (http://ngcordova.com/)
• Built-in CSS library / pre-build components (http://ionicframework.com/docs/components/)
• Development tooling: live reloading, SASS support, icon/splash creation, etc. (http://ionicframework.com/docs/cli/)

Best of luck!