今天，我们 Ionic 很高兴与大家分享 Angular Schematics for Capacitor 的发布。让我们看一下 Capacitor 是什么以及如何将其添加到 Angular 项目中。

电容器概述（Capacitor overview）

首先，让我们回顾一下 Capacitor 是什么以及它与其他跨平台项目的关系。

乍一看，Capacitor 遵循了许多与 Apache Cordova 相同的想法。

有一个呈现应用程序的 Web 层和一个侦听对本机 API 的调用的本机层。这些层中有许多技术决策，可以使开发人员和用户的整体体验更加顺畅。

• 统一API，让跨平台开发更简单
• 本机平台不是分发目标，但致力于版本控制，并且可以由开发人员编辑。
• 现代本机构建工具和库（例如 Cocoapods、Android Libraries、Xcode 和 Android Studio）可提供对本机项目更改的更多可见性和更好的应用程序可维护性。
• 利用npm和现代 JS 工具来简化添加核心插件和创建新插件的过程。

这些原则为开发人员带来了最好的 Web 开发和本机开发，几乎没有任何摩擦。

电容器和角度集成（Capacitor and Angular integration）

Capacitor 本身由 2 个包组成，即核心功能 ( @capacitor/core ) 和 CLI ( @capacitor/cli )。要将 Capacitor 添加到您的项目中，让我们从 Angular CLI 中的简单 Angular 应用程序开始。

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

创建应用程序后，让我们将 Capacitor 添加到我们的项目中。

ng add @capacitor/angular

这样，开发人员可以轻松地将 Capacitor 添加到他们的项目中。

当原理图运行完成后，开发人员应该构建我们的应用程序，并运行npx cap add <ios,android>或yarn cap add <ios, android>我们的 Xcode 或 Android Studio 项目将被创建！

ng run capApp:build
npx cap add ios

拉开窗帘（Pulling back the curtain）

那么原理图在幕后实际上在做什么呢？

• 安装Capacitor依赖项 首先，它将 Capacitor 依赖项添加到package.json ：Core 和 CLI。
• 安装依赖项 这将快速安装 npm（或yarn），然后确保我们拥有 Capacitor 的 Core 和 CLI 包。
• 运行 Capacitor CLI 的初始化脚本并创建所需的脚手架。

为了确保 Capacitor 项目理解您的 Angular 项目，原理图根据您的angular.json推断出大量数据。它将读取您的应用程序名称并在创建 iOS 和 Android 项目时使用该名称，并读取构建文件夹，以便在准备本机项目时知道将您的 Web 代码复制到哪里。这意味着您的 Capacitor 项目将感觉像是 Angular 项目的自然延伸。

添加后，我们会构建应用程序，并将其部署到 iOS、Android、Web 或 Electron。要构建 iOS 或 Android，您需要安装本机 SDK 和工具。有关详细指南，请参阅此iOS指南和此Android指南

离别的思念（Parting thoughts）

虽然 Capacitor 相当新，但我们已经看到许多开发人员采用它并取得了成功。如果您想了解更多有关 Capacitor 的信息，请务必访问官方文档。如果您有兴趣提供有关@capacitor/angular包和 ngAdd 体验的反馈，请在存储库上提出问题，或者直接向我发送推文😄。

文章来源地址：https://blog.angular.dev/announcing-the-capacitor-ngadd-schematic-732fd90f40fa