Creating a New Project

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

Prerequisites

You need to use the following versions of npm modules:

• Angular CLI - v6.1.0 or newer

• The latest version of NativeScript Schematics

npm i -g @nativescript/schematics

Using the Angular CLI

To create a new code-sharing project, we need to 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

If you’d like, you can also use the -c shorthand instead of --collection. That looks like this.

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

NOTE: If the above command doesn't work, check that you don't have an invalid configuration file in your home directory (/home/user-name/.angular.json). Please delete the file and run the command again.

Styling

By default, 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

SASS

However, if you prefer 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,
• _app-variables.scss - a stylesheet with common variables to be shared between iOS and 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

NativeScript Core Theme

By default, all projects will be generated with the NativeScript Core Theme.

The NativeScript Core Theme is a CSS Theme for native applications.

In case you don't want to use NativeScript Core Theme in your project, you can provide the --no-theme flag. That looks like this when using CSS.

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

And like this when using SASS.

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

This will skip any configuration for NativeScript theme, by removing it from your package.json and removing all references from your NativeScript stylesheets.