NativeScript Angular code sharing

3 min readAug 4, 2018

You can watch the NativeScript {N} Angular code sharing
webinar to get the full insights. This post is a quick
sum up of this webinar on how to set up a Web +
Mobile shared project with {N} Angular.

First, you have to setup {N} then follow the steps below to setup a shared project.

Setup Angular CLI

Install the latest version of Angular CLI and {N} Schematics:

Create new project

Now, we are able to create a {N} project for mobile apps only or create Web + Mobile shared project:

Shared Project Structure

The ng new will create shared project in a monorepo style: web app + mobile app in the same codebase. These two apps will share more than 80% of code. This is really great considering that the output will be 3 applications: mobile apps (iOS/android) et web app. The specifics things will be the styling and the html that are platforms dependent:

How does Shared Project work ?

The below image speaks by itself :-) :

Code splitting in a Shared Project

As said before, the styling and the html should be platform dependent. To achieve such splitting, you must add .tns to target {N}. If you don’t put anything, it targets web app. This suffix can be configured via nsconfig.json file.