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:
- Make changes to
src/nativescript-angular
, and rebuild withgrunt build
. If succesful, you should get a npm package in the project root. - Navigate to the ng-sample subdir:
$ cd ng-sample
. Make some changes to the app or../src/nativescript-angular
. - 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:
Known issues
- There are certain issues with the Parse5DomAdapter and we'll likely need to provide our own later on: