Create NativeScript App with Angular

Angular has been around for a few years and, it has been useful when creating many different categories of applications, including web and mobile applications.

Some developers feel that the experience for creating these various applications can be inconsistent and confusing, even though driving technology has always been the same.

However, with custom schematics, it can be used with the official Angular CLI. This allows us to create a project with the Angular CLI, add a schematic, i.e NativeScript, and end up with CLI compatible for both web and mobile.

In this tutorial, we will use the Angular CLI to build a web and mobile compatible application with the NativeScript schematics.

Step 1: Installing the NPM dependencies

Before we create and maintain the NativeScript application from the Angular CLI, we need to make sure we have all NPM dependencies available on our machine. Install Node.js® and npm if they are not already available on your machine. Now, let’s execute the following from the command line to install Angular CLI:

npm install @angular/cli@6.1.0-beta.0

Step 2: Creating an Angular CLI Project with NativeScript Support

Remember that the angular schematics are only for creating and maintaining projects. The NativeScript CLI is still required for building and deploying mobile applications.

Let’s navigate into the project angular-native-project and execute the command below to install NativeScript CLI along with the NativeScript schematics.

npm install nativescript@rc
npm install --save-dev @nativescript/schematics@rc

Now that we have all the dependencies in place it’s time to add NativeScript support to our new Angular CLI project. Open to the command line, and execute the following command:

ng new angular-native-project

The above will create a new Angular project, which by default, will be for web applications, not native mobile applications.

You have to be in a project that was created with the Angular CLI, so if you had created a NativeScript project with the NativeScript CLI, the schematics can’t be included.

ng add @nativescript/schematics

Code-Sharing Project:

We can also create a code-sharing project directly, which allows you to build for both web and mobile, by providing a –shared flag. Like this:

ng new -c=@nativescript/schematics angular-native-project2 --prefix=my --no-theme --style=scss --no-webpack

Step 3: Schematic Changes and Angular Development Process

After adding the NativeScript schematics to our project, you’ll notice that some new files with .tns extension have been created and a few of the configuration files altered. Check the project directory to see the .tns.ts and .tns.html files.

NativeScript is a native mobile application framework which means we can’t use standard HTML markup for the UI. For this reason, we will have to maintain a web UI and a NativeScript UI. We can have a web version and a NativeScript version for everything when it comes to the TypeScript, but we don’t need to.

But, it makes sense is in the modules and routing areas since there are services like NativeScriptRoutingModule and RoutingModule which accomplish the same, but are specific to the platform.

Let’s modify our new project so that we can have different platforms under a single CLI. Copy the src/app/app-routing.module.tns.ts file to src/app/app.routing.ts and make it look like the following:

The only difference here is in the naming of the modules being used. Since this file is going to be used for the web, we have removed the tns from the filename and used the vanilla Angular modules.

Next, we need to alter the project’s src/app/app.module.ts file to be more aligned with the NativeScript version:

The last step is to modify the src/app/app.component.html file. The Angular project has a default landing page with no routing, at the time of writing. So we need to finish the routing setup. Open src/app/app.component.html, and replace everything with the following:

<router-outlet></router-outlet>

We’re trying to match the behavior between the two applications. As the application is fresh, the NativeScript version accomplished a lot more than the simple web version. The initial content further validated this.

At this point, our project is done. But, what if we create need a new component going forward? Let’s try the following command:

ng g component home

The above command will use the CLI and create a component called home. As a result, we’ll see the following files getting created:

• src/app/home/home.component.css
• src/app/home/home.component.html
• src/app/home/home.component.tns.html
• src/app/home/home.component.ts
• src/app/home/home.component.spec.ts

We can use the Angular CLI like we would any other Angular application. And we’ll end up with a .tns.html file that we can add your custom UI for mobile to.

Step 4: Running an Angular CLI Project on Android or iOS with the NativeScript CLI

With the project created, altered, and ready to go, we can now run the application. To test if the project still works as a web application, let’s execute the following:

ng serve

Once the command completes, Visit http://localhost:4200 in your web browser to see it in action. To run the application on a mobile device, we will execute the following command:

tns run ios --bundle

The command above will run the application on iOS. And we can easily switch the ios part for android if needed. The most important part of the command is the –bundle flag. If we don’t bundle the application, it will crash with a lot of errors.

Conclusion

We just created your first NativeScript Android and iOS application using the Angular JavaScript framework. This is huge because now NativeScript becomes superior to similar Angular frameworks like Ionic 2. NativeScript is now being able to build native applications, eliminating a common web view.

Note: NativeScript projects build native mobile applications. For this reason, we can recycle the logic, but separate UI components must exist. This is important because with this we can give our mobile and web applications a separate, but very polished user experience.

🔊 Listen