Announcing the Capacitor ngAdd Schematic

Let’s take a look at what Capacitor is and how to add it to an Angular project

First off, let’s go over what Capacitor is and how it relates to other cross platform projects out there.

At a glance, Capacitor follows many of the same ideas as Apache Cordova.

pic courtesy: blog.angular.io

There is a Web layer that renders the app and a native layer that listens for calls to Native APIs. Within those layers are many technical decisions that make the overall developer and user experience much smoother.

• Unified API that makes cross-platform development easier
• Native Platforms are not distribution targets, but are committed to version control and can be edited by the developer.
• Modern native build tools and libraries, such as Cocoapods, Android Libraries, Xcode and Android Studio, provide more visibility into native project changes and better app maintainability.
• Utilize npm and modern JS tooling to simplify adding core plugins and creating new ones.

These principles bring the best of web development and native development with little to no friction for developers.

Capacitor and Angular integration

Capacitor itself is made up of 2 packages, the core functionality (@capacitor/core) and the CLI (@capacitor/cli). To add Capacitor to your project, let’s start with a simple Angular App from the Angular CLI.

ng new capApp --routing --style css
cd capApp

With the app created, let’s add Capacitor to our project.

ng add @capacitor/angular

With this, developers can add Capacitor to their project with ease.

pic courtesy: blog.angular.io

When the schematic is done running, developers should build our app, and run npx cap add <ios,android> or yarn cap add <ios, android> and our Xcode or Android Studio projects will be created!

ng run capApp:build
npx cap add ios

Pulling back the curtain

• Installing Capacitor Dependencies

First, it adds Capacitor dependencies to the package.json: Core and CLI.

• Installs dependencies

This will just do a quick npm (or yarn) install then make sure we have the Core and CLI packages for Capacitor.

• Run Capacitor CLI’s init script and create the scaffolding needed.

To make sure that the Capacitor project understands your Angular project, the schematic infers a lot of data based on your angular.json. It will read your app’s name and use that when creating the iOS and Android projects, as well as read the build folder so it knows where to copy your web code when preparing the native projects. This means that your Capacitor project will feel like a natural extension of your Angular project.

Once added, we do a build of our app, and deploy to either iOS, Android, web, or Electron. For building to iOS or Android, you’ll need to have the native SDKs and tools installed.

For more Information and to build the website using Angular, Hire Angular Developer from us as we give you high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the custom web app using Angular, please visit our technology page.

Source:

• blog.angular.io