heavymery / nativescript-angular

Integrating NativeScript with Angular 2

Integrating NativeScript with Angular 2.

Running locally

Prerequisites

Install your native toolchain and NativeScript as described in the docs:

https://docs.nativescript.org/setup/quick-setup

Install dependencies

$ npm install -g grunt-cli gulp

Then install the needed NPM packages:

$ npm install

Compile and prepare NativeScript and Angular

$ grunt

Initialize the test NativeScript app (ng-sample)

$ cd ng-sample
$ npm install

The latter installs the angular2 and tns-core-modules packages that you just built by running grunt prepare step in the project root.

Run the ng-sample app

$ tns run android
$ tns run ios

(Optional) Webpack bundling

Install the webpack tool:

$ npm install -g webpack

Enable the webpack hook by setting the WEBPACK_BUILD environment variable. You can do it with a single command on OSX/Linux using:

$ env WEBPACK_BUILD=1 tns run android

Running the tests

$ cd tests
$ npm install
$ tns test ios --emulator

Developer workflow:

1. Make changes to src/nativescript-angular, and rebuild with grunt build. If succesful, you should get a npm package in the project root.
2. Navigate to the ng-sample subdir: $ cd ng-sample. Make some changes to the app or ../src/nativescript-angular.
3. Run with $ tns run android or $ tns run ios

Note that you should never change files in ng-sample/src/nativescript-angular/ as they are overwritten with the reference sources in src/nativescript-angular on every grunt app run.

Watch the video explaining Angular 2 and NativeScript

NativeScript session on AngularConnect conference

Explore the examples

The ng-sample app is meant for testing stuff while developing the renderer code, and isn't the best example out there. You can take a look at these sample apps that use the published builds from npm:

• Hello world starter
• TodoMVC sample implementation

Known issues

1. There are certain issues with the Parse5DomAdapter and we'll likely need to provide our own later on:

• Self-closing elements (<Label text="Name" /><Button text="Save" />) get parsed wrong (in this case Button gets parsed as a Label child.