There's a new way to build web and mobile apps with Angular and NativeScript

It’s no news that developers can use NativeScript with Angular to build mobile apps. However, in order to build both a web and a native mobile app, you have to create two separate projects. That’s no longer an issue though! Meet nativescript-schematics, a schematic that enables you to build both web and mobile apps from a single project.

Developers can use NativeScript with Angular to build mobile apps, this has been the case since the beginning of Angular. However, things get more complicated if you wish to build both a web and a native mobile app because then you have to create two separate projects.

That’s no longer the case, though. The Angular and NativeScript teams have joined forces to create nativescript-schematics, a schematic collection that enables you to build both web and mobile apps from a single project. Sebastian Witalec, Senior Developer Advocate at Progress announced the new way to build web and mobile apps with Angular and NativeScript in a recent blog post.

Before we dive deeper into this schematic collection, you should know that it only works with angular/cli: 6.1.0 or newer.

The goal is to be able to 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.

What does code-sharing mean?

According to NativeScript’s code-sharing intro,

A code-sharing project is one where we keep the code for the web and mobile apps in one place. Here’s a quick diagram to show you what that looks like at a high level.

You can use Angular CLI and NativeScript schematics to generate a brand new project with a code-sharing setup.

You’ll need the following versions of npm modules:

Angular CLI – v6.1.0 or newer npm i -g @angular/cli

– v6.1.0 or newer The latest version of NativeScript Schematics npm i -g @nativescript/schematics



Use the Angular CLI’s ng new command, with @nativescript/schematics as the source collection and the –shared flag.

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

Alternatively, you can use the -c shorthand instead of --collection

ng new -c=@nativescript/schematics project-name --shared

The project will be generated with CSS as the default format for styling, with the following style files:

app.css – The stylesheet to use for your mobile app

– The stylesheet to use for your mobile app styles.css – The stylesheet to use for your web app

If you wish to use SASS, you can set the style flag to scss when creating a new project with ng new . The full command to run looks like this.

ng new -c=@nativescript/schematics sass-project --shared --style=scss

This will generate the following files:

_app-common.scss – a stylesheet with common variables to be shared between web , iOS and Android ,

– a stylesheet with common variables to be shared between , and , _app-variables.scss – a stylesheet with common variables to be shared between iOS and Android . It also imports the NativeScript Core Theme variables,

– a stylesheet with common variables to be shared between and . It also imports the variables, app.android.scss – a stylesheet for your Android app

– a stylesheet for your app app.ios.scss – a stylesheet for your iOS app

– a stylesheet for your app styles.scss – a stylesheet for your Web app

All projects will be generated with the NativeScript Core Theme but if you don’t want to use this Theme, you can provide the –no-theme flag. This is how it looks like when you use CSS.

ng new -c=@nativescript/schematics no-theme-project --shared --no-theme

And this is how it looks like when you use SASS.

ng new -c=@nativescript/schematics sass-no-theme-project --shared --style=scss --no-theme

If you want to learn how to migrate an existing Angular Web project to a code-sharing structure, read this.

For more information about nativescript-schematics, don’t forget to read Sebastian Witalec’s blog post. And after you’ve tried code sharing, make sure to give them your feedback here.