# @nstudio/angular > Angular Plugin for xplat Latest version **20.0.3** (published 2024-11-08) · MIT license · 0 weekly downloads ## Install ```sh npm install @nstudio/angular pnpm add @nstudio/angular yarn add @nstudio/angular bun add @nstudio/angular ``` ## Health **Score 30/100 (F)** — status: maintenance-mode. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 20.0.3 | | Published | 2024-11-08 | | First published | 2019-07-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 326 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 373 | | Author | Nathan Walker | | Maintainers | nativescript-bot, multishiv19, rigor789, alexziskind1, walkerrunpdx, bradmartin, davecoffin, triniwiz | | Keywords | xplat, cross-platform, multi-platform, nx, angular, schematics, nstudio | ## Links - npm: https://www.npmjs.com/package/@nstudio/angular - Repository: https://github.com/nstudio/xplat - Homepage: https://nstudio.io/xplat - Issues: https://github.com/nstudio/xplat/issues - npm.io page: https://npm.io/package/@nstudio/angular ## Dependencies (1) - [@nx/angular](https://npm.io/package/@nx/angular.md) ^20.0.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 20.0.3 (latest) — 2024-11-08 - 19.0.0-alpha.1 (alpha) — 2024-05-27 - 16.2.0-beta.0 (beta) — 2023-05-29 - 15.0.4-rc.1 (rc) — 2023-05-01 - 20.0.2 — 2024-11-02 - 20.0.1 — 2024-10-23 - 20.0.0 — 2024-10-23 - 19.0.0 — 2024-05-27 - 19.0.0-alpha.0 — 2024-05-26 - 17.0.1 — 2023-10-23 - 17.0.0 — 2023-10-23 - 17.0.0-alpha.1 — 2023-10-23 - 17.0.0-alpha.0 — 2023-10-23 - 16.8.0 — 2023-10-14 - 16.7.6 — 2023-09-23 - … 123 more at https://npm.io/package/@nstudio/angular/versions ## README

Cross-platform (xplat) tools for Nx workspaces

[![License](https://img.shields.io/npm/l/@nstudio/schematics.svg?style=flat-square)]() [![NPM Version](https://badge.fury.io/js/%40nstudio%2Fschematics.svg)](https://www.npmjs.com/@nstudio/schematics)
**xplat** is an added value pack for [Nx](https://nrwl.io/nx) which provides additional app generators and optional supporting architecture for different platform/framework combinations. ## Currently supported platforms - [Electron](https://electronjs.org/) > Build cross platform desktop apps with JavaScript, HTML, and CSS. - [Ionic](https://ionicframework.com/) > Build amazing apps in one codebase, for any platform, with the web. - [NativeScript](https://www.nativescript.org/) > Build rich iOS and Android apps with direct access to native api's from JavaScript directly. ## Quickstart ```sh npx create-nx-workspace@latest ✔ Where would you like to create your workspace? · {your-workspace-name} # Choose "None" ? Which stack do you want to use? … None: Configures a minimal structure without specific frameworks or technologies. # Choose "Integrated" ? Package-based or integrated? … Integrated: Nx creates a workspace structure most suitable for building apps. ``` ### Init workspace Install the @nx/js plugin. ```sh npm install @nx/js -D ``` Now initialize -- This will ensure a `tsconfig.base.json` is created to begin building your workspace. ```sh npx nx g @nx/js:init ``` ### Install the tools: ``` npm install @nstudio/xplat -D ``` You are now ready to create apps: ``` npx nx g @nstudio/xplat:app ``` **Potential schematics error:** If you encounter a `SchematicNameCollisionException` issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e ## App generation examples The additional app generators can be used as follows: ### Electron Electron app generator can use any web app in the workspace as it's target. If you don't have a web app yet, create one first: ``` npx nx g @nstudio/xplat:app sample ``` > choose `web` You can now use the web app as the Electron target: ``` npx nx g @nstudio/xplat:app desktop --target=web-sample ``` > choose `electron` Develop with: ``` npm run start.electron.desktop ``` ### Ionic ``` npx nx g @nstudio/xplat:app sample ``` > choose `ionic` Develop in browser with: ``` npx nx serve ionic-sample ``` Build Ionic app: ``` npx nx build ionic-sample ``` A. **Capacitor iOS** - Prepare for development ``` npm run prepare.ionic.sample.ios ``` You can now open in Xcode for further development: ``` npm run open.ionic.sample.ios ``` B. **Capacitor Android** - Prepare for development ``` npm run prepare.ionic.sample.android ``` You can now open in Android Studio for further development: ``` npm run open.ionic.sample.android ``` ### NativeScript ``` nx g @nstudio/xplat:app mobile ``` > choose `nativescript` A. **iOS** ``` npx nx run nativescript-mobile:ios ``` B. **Android** ``` npx nx run nativescript-mobile:android ``` ## Documentation - [Getting Started](https://nstudio.io/xplat/getting-started) - [Fundamentals](https://nstudio.io/xplat/fundamentals) - [API Documentation](https://nstudio.io/xplat/api) - [Design Doc](https://t.co/z2lRxOBFAg) - [Wiki](https://github.com/nstudio/xplat/wiki/FAQ) ## Talks - [Super Powered, Server Rendered Progressive Native Apps](https://www.youtube.com/watch?v=EqqNexmu3Ug) by [Nathan Walker](http://github.com/NathanWalker) and [Jeff Whelpley](https://github.com/jeffwhelpley) - [ngAir 172 - xplat (cross-platform) tools for Nx workspaces with Nathan Walker](https://www.youtube.com/watch?v=0I8D25nab5c) ## Recommended extra tooling - [VS Code](https://code.visualstudio.com/) - [Nx Console for VS Code](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) ## Example repos for different scenarios - Ionic + Web: https://github.com/nstudio/xplat-sample-ionic-web - Electron + Web with routing: https://github.com/nstudio/xplat-sample-electron-routing ## Context - [Why it's Hard to Decide on Technologies](https://medium.com/@adamklein_66511/why-its-hard-to-decide-on-technologies-9d67b6adf157) by [Adam Klein](https://github.com/adamkleingit) --- _Source: https://npm.io/package/@nstudio/angular · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._