days
0
-8
hours
-2
-3
minutes
-2
-2
seconds
-3
-1
search
There's a new way to build web and mobile apps with Angular and NativeScript

Angular and NativeScript teams join forces to create nativescript-schematics

Gabriela Motroc
Angular
© Shutterstock / Kim Britten

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.

How to create a code-sharing project

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
  • 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
  • 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 webiOS and Android,
  • _app-variables.scss – a stylesheet with common variables to be shared between iOSand Android. It also imports the NativeScript Core Theme variables,
  • app.android.scss – a stylesheet for your Android app
  • app.ios.scss – a stylesheet for your iOS 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

Author
Gabriela Motroc
Gabriela Motroc is editor of JAXenter.com and JAX Magazine. Before working at Software & Support Media Group, she studied International Communication Management at the Hague University of Applied Sciences.

Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of