Multi-platform apps with Angular and NativeScript

web
mobile

Topic: Multi-platform apps with Angular and NativeScript
Published 06.11.2019 Updated 03.12.2019

Introduction

NativeScript is an open source framework for building native mobile apps with JavaScript. For a long time, when you needed to build apps for multiple platforms, you had to create and maintain separate projects. The Angular and NativeScript teams teamed up to create nativescript-schematics, a tool that allows you to build both web and mobile apps from a single, code-sharing project.

In this article, we will learn how we can use code sharing to build multi-plaform apps with Angular and NativeScript.

Prerequisites

Node.js: https://nodejs.org/en/

Configuration for Android/iOS development: 
https://mdbootstrap.com/docs/angular/mobile/getting-started/quick-start/#full-setup

Angular CLI: npm install -g @angular/cli

NativeScript CLI: npm install -g nativescript

NativeScript schematics: npm install -g @nativescript/schematics

Code sharing

A code-sharing project is one where we keep the code for the web and mobile applications in one place. It provides us with an easy way to share the business logic between web, Android and iOS platforms, but at the same time allows to add platform-specific code where necessary.

To avoid conflicts in this kind of project we should use a naming convention. Adding .tns before the file extension indicates that this file is NativeScript-specific, while the same file without .tns extension will be used for web app. Usually the file names will look like this:

app.component.ts - a shared file for all platforms

app.component.html - a web-specific template

app.component.tns.html - a mobile-specific template

app.component.css - a web-specific stylesheet

app.component.tns.css - a mobile-specific stylesheet

app.module.ts - a web-specific module

app.modules.tns.ts - a mobile-specific module

What can be shared:

- services for common business logic

- routes configuration

- component class definition

What can't be shared:

- UI layer (stylesheets and templates) -you should use different UI component for the web and mobile platforms

- NgModules - so that you can import platform-specific modules/components


Getting started

In this section we will learn how to create new code-sharing project with NativeScript schematics tool and how to build the application on different platforms.

Creating multi-platform app:

To create multi-platform application open the terminal window and execute the following command:

ng new --collection=@nativescript/schematics app-name --shared

Building applications:

Once you have a code-sharing project, you can easily build application with Angular CLI and NativeScript CLI. Execute the following commands in your terminal (you may need to use multiple instances of the terminal, because all these processes need to run simultaneously):

To build a web application:

ng serve

To build an Android application:

tns run android --bundle

To build an iOS application:

tns run ios --bundle

As you can see, both web and mobile applications use the same title variable stored in home.component.ts file, but the rendered templates are slightly different on both platforms thanks to separate home.component.html and home.component.tns.html files.

What's next

Go ahead and give code sharing a try by extending the starter project that we previously created. You can add different styles for your web and mobile apps, add new typescript logic and include platform-specific components by importing them in the separate modules.

We created many ready-to-use Angular UI components for both web and mobile platforms that can be useful in your project:

MDB Angular Web Components

MDB Angular Mobile Components

Summary

As you can see, building apps for both the web and mobile with NativeScript and Angular is very easy thanks to NativeScript schematics tool. The ability to use Angular skills to create applications for many platforms significantly speeds up the development process.

Write
Please insert min. 20 characters.