Announcing the Capacitor ngAdd Schematic

Today, we at Ionic are happy to share the release of Angular Schematics for Capacitor. Let’s take a look at what Capacitor is and how to add it to an Angular project.

Capacitor overview

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.

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.

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

So what is the schematic actually doing behind the scenes?

• 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 a detailed guide on this, see this guide for iOS and this guide for Android

Parting thoughts

While Capacitor is fairly new, we’re already seeing a lot of developers adopt it and be successful with it. If you’d like to know more about Capacitor, be sure to visit the official docs. If you’re interested in providing some feedback on the @capacitor/angular package and the ngAdd experience, please open an issue on the repository, or just send me a tweet 😄.