Apps that work natively on the Web and Mobile

Here is an exciting new way to build web and mobile apps with Angular and NativeScript.

First, some background: since the beginning of Angular, you could use NativeScript with Angular to build mobile apps.

NativeScript is an open source framework for building truly native mobile apps with JavaScript. It lets you use your existing Angular skills, and as a result you get a native UI & performance on iOS and Android.

However, when you needed to build both a web and a native mobile app, you had to create, develop and maintain two separate projects. Although this got the job done, it quickly became apparent that we could do better than that.

The Dream of Code Sharing

This challenge led to a dream of a Code-Sharing Project. One that would allow you to keep the code for the web and mobile apps in one place. One that would allow us to share the business logic between web, iOS and Android, but still be flexible enough to include platform-specific code where necessary.

With the dawn of Schematics and ng add we now had a whole new set of possibilities.

To realise the Code-Sharing Dream the Angular and NativeScript teams teamed up to create nativescript-schematics, a schematic that enables you to build both web and mobile apps from a single project.

Please note that @nativescript/schematics works with @angular/cli 6.1.0 or newer.

We are looking at a scenario where you can use the Angular CLI with the {N} Schematics to, either:

• create a new project with a code-sharing structure, or
• convert an existing web project to a code-sharing structure.

Then:

• convert existing components and modules to a code-sharing format, and
• generate new components and modules in a code-sharing format.

To share or not to share

The objective is to share as much code as possible, and break the platform-specific code into separate files.

This usually means that we can share the code for:

• the Routes for the navigation
• the Services for the common business logic
• the Component Class definition for the common behaviour of each component

While, separating the code for:

• the UI Layer (stylesheets and html)  –  as you need to use different user interface components in web and NativeScript-built native apps
• the NgModules – so that we can import platform-specific modules, without creating conflicts (i.e. Angular Material Design  –  which is web only) between web and mobile

Here’s a diagram to show you what that looks like at a high level.

Getting started

To get started you could either create a new project with a code-sharing structure. Just run ng new with @nativescript/schematics as the collection.

Just like this:

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

Note, you may need to install @nativescript/schematics first:

npm install --global @nativescript/schematics

Or we could extend an existing web projects with the capability to build mobile apps with NativeScript, by calling:

ng add @nativescript/schematics

This command adds the NativeScript-specific:

• npm modules
• AppModule definition
• AppComponent definition
• tsconfig

Build Process

To complete the story, we need a build process that is capable of using the shared files and the platform-specific ones, and provide a web or mobile app as a result.

Building for Web

To build a web app, it is “Business as usual”, just use the Angular CLI to do the job.

When you call ng serve or ng build, the Angular CLI ignores all NativeScript-specific files — as none of the web files would directly reference any .tns files.

ng serve -> serves a web app from a code-sharing project

"exclude": [
  "**/*.ns.ts",
  "**/*.tns.ts",
  "**/*.android.ts",
  "**/*.ios.ts"
]

Building for mobile

In order to build an iOS or an Android app with NativeScript, we need to use the NativeScript CLI with the NativeScript Webpack plugin.

Call:

tns run ios -- bundle – to build an iOS app from the code-sharing project
tns run android -- bundle - to build an Android app from the code-sharing project

During the build process, Webpack takes care of providing the .tns files whenever they are available, and as a result hiding the web versions of the same files (virtually, files like home.component.tns.html become home.component.html). While the NativeScript CLI is responsible for building a native mobile app.

For more Information and to build website using Angular, Hire Angular Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom web app using Angular, please visit our technology page.