February 22, 2016
Setup NativeScript and Angular 2
NativeScript came up as a framework to write native mobile Apps for Android and iOS, and they even want to come up with Windows 10 support in March 2016.
My colleague described first steps in NativScript in his article back in December.
Today I want to show you, how to setup your NativeScript + TypeScript + Angular2 Project and in another blog post I show you some basic features.
The main problem at the moment is: NativeScript supports Angular 2 beta, but there are only some example projects on the telerik github repo.
There is no template to create a Angular2 and Typescript from tns-cli, so we use a basic template from github for a NativeScript and Typescript and then add the needed Angular2 dependecies.
Setup
The setup is for android, but you can replace all android commands with the according ios commands, it should work fine.
NativeScript and TypeScript
- You need to setup NativeScript on your machine, follow this Setup-Guide.
- Update NativeScript with npm install -g nativescript
- Because there is no direct template included into the NativeScript-CLI, you need to clone a template provided by a telerik worker on github. (https://github.com/hdeshev/nativescript-ts-hello)
- Switch into the folder and:
- go into the
package.json and update the dependencies:
"tns-core-modules": "^1.5.2" to "tns-core-modules": "^1.6.1-angular-0" - run npm install in console
- run tns platform add android in console
- run grunt app-full in console
- go into the
package.json and update the dependencies:
- now you can fire up your emulator and type tns run android , hopefully you will see a basic app
Congratulations you set up a NativeScript + TypeScript project.
The provided grunt build copies all files from src to the app folder, so only change the files in src.
NativeScript and Angular2
To change the build to Angular2 we need some more dependencies and commands.
You can find a basic instruction here, but the dependencies are not up-to-date, so we copy them from this NativeScript Angular2 template.
Go into your package.json and add/change following dependencies:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
"devDependencies": { "grunt": "0.4.5", "grunt-contrib-copy": "0.8.2", "grunt-shell": "1.1.2", "grunt-ts": "5.3.2", "nativescript-dev-typescript": "^0.3.0", "typescript": "^1.7.5" }, "dependencies": { "tns-core-modules": "^1.6.1-angular-0", "nativescript-angular": "0.0.32", "angular2": "2.0.0-beta.6", "parse5": "1.4.2", "punycode": "1.3.2", "querystring": "0.2.0", "url": "0.10.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.14" } |
Again type npm install, to update the dependencies.
Now you can get the TypeScript declarations via: ( npm install -g tsd)
|
1 2 |
> tsd install angular2 rx es6-promise --save > tsd link |
Now go into the src folder with your favorite IDE:
Remove main-page.xml and main-view-model.ts , they are not needed anymore.
Go into app.ts , we need to bootstrap Angular2 now:
|
1 2 3 4 5 |
// this import should be first in order to load some required settings (like globals and reflect-metadata) import {nativeScriptBootstrap} from "nativescript-angular/application"; import {MainComponent} from "./main-page"; nativeScriptBootstrap(MainComponent); |
Go into main-page.ts and replace the content with:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import {Component} from "angular2/core"; @Component({ selector: "my-app", template: ` <StackLayout orientation="vertical"> <Label [text]="message" class="title" (tap)="message = 'OHAI'"></Label> </StackLayout> `, }) export class MainComponent { public message: string = "Hello, Angular!"; } |
Create the file compat.d.ts in the src folder with following content:
|
1 2 3 |
// Angular 2 compatibility types declare type MapConstructor = typeof Map; declare type SetConstructor = typeof Set; |
The content is based on the Angular2 Hello World NG example provided by NativeScript.
Now run grunt app-full and tns run android in your console.
Congratulations you set up NativeScript + TypeScript + Angular2.
Stay tuned for the upcoming blog post with an NativeScript and Angular2 App.
theCodeCampus
Developer at 
Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.