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

  1. You need to setup NativeScript on your machine, follow this Setup-Guide.
  2. Update NativeScript with npm install -g nativescript
  3. 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)
  4. 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
  5. 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:

 

Again type npm install, to update the dependencies.

Now you can get the TypeScript declarations via: ( npm install -g tsd)

 

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:

 

Go into main-page.ts and replace the content with:

 

Create the file compat.d.ts in the src folder with following content:

 

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.

NativeScriptAngular

Congratulations you set up NativeScript + TypeScript + Angular2.

Stay tuned for the upcoming blog post with an NativeScript and Angular2 App.

Related Posts

Frederik von Berg
Developer at thecodecampus </>


Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

```
code block
example
```

Your email address will not be published.