Setting up of the Angular project with both mobile and web app shared code is pretty simple process now. In the past, software developers had to create a minimum of two separate projects during the web and native mobile project development. Today, everything we need is Angular CLI and NativeScript Schematics, which is a collection that enables the build of web and mobile applications from the same project. Only prerequisite for a rapid start is to install Angular CLI (v6.1.0 or newer) and the last version of NativeScript Schematics.
NativeScript Shared Project
Shared Project is where the source code of Android, iOS and Web applications is located in a same place. Platform specific code is divided into separate files, and our goal is to share the most code possible between the apps. What can be shared is Routes for navigation, Services for common business logic and Component for common components behaviour. On the other side, what cannot be shared is View, CSS and HTML markup, as well as NgModules. Views will certainly be different because we quite often use various user interface components in Mobile and Web applications. Taking everything mentioned in account, it is possible to reach up to 70% of shared code in Shared Project.
Mobile & Web projects Diversity
If we want to assure the final appearance of mobile and web applications to be divergent, but also keep the common logic under the hood, it is necessary to do next. Web template should be named foo.component.html, while our NativeScript template for Android and/or iOS application should be foo.component.tns.html so the mobile and the web view will be separated. In this way, we will be able to load data through the async pipe or execute the same business logic methods in both examples. Dissimilar files can be easily and quickly generated through the snippets available in Visual Studio Code, and you are also able to develop unique features for each mobile platform (iOS & Android).
Installation
# first you should install Angular CLI
npm i -g @angular/cli
# after that, you can install NativeScript Schematics
npm i -g @nativescript/schematics
Create a new project with Angular CLI
# classic Shared Project
ng new --collection=@nativescript/schematics project-name --shared
# classic Shared Project (shorter)
ng new -c=@nativescript/schematics project-name --shared
# Shared Project with SASS styling
ng new -c=@nativescript/schematics sass-project --shared --style=scss
# Shared Project with CSS styling (without standard NativeScript Core Theme)
ng new -c=@nativescript/schematics no-theme-project --shared --no-theme
# Shared Project with SASS styling (without standard NativeScript Core Theme)
ng new -c=@nativescript/schematics sass-no-theme-project --shared --style=scss --no-theme
Styling and Themes
By default, CSS is a standard styling format in Shared Project and it consists of two main parts. Those are app.css for mobile and styles.css used for web application. However, if we want to use SASS instead of CSS approach, all necessary files will be generated as soon as you create new project if we state sass-project. We also have to bear in mind that NativeScript Core Theme is automatically generated in every newly created project and we can bypass it by using --no-theme flag while creating new Shared Project. After that, all standard themes configurations will be removed in package.json, as well as their references from NativeScript stylesheets.
Build and run your iOS, Android or Web app
# build web app
ng serve
# build web app & open it in default browser
ng serve -o
# run native iOS application
tns run ios --bundle
# run native Android application
tns run android --bundle
Summary
Angular presented us a new exciting way of sharing code between native mobile and web applications. This allows us to easily share business logic and also provides a simple and intuitive way to separate specific code between iOS, Android and Web apps. This was an overview of Shared Project's basic feature. You can try converting the existing Angular Web projects to a code-sharing project with additional reading from the links below. Cheers!
Top comments (1)
There is a typo "npm i -g @nativescript/shematics". Please correct it to "npm i -g @nativescript/schematics" and then delete this comment.