2. Setting Up the Development Environment

2.1. Install the tools

Node.js: Download and install version 24 (LTS) from nodejs.org. [Angular CLI] 22 requires [Node.js] 22.22.3 (or a more recent version 22), 24.15 or higher, or 26 and later: an older version will fail to run the [ng] command. The installer also installs [npm], the package manager for [Node.js]. Verify the installation in a terminal:

1 2	`node --version npm --version`

Visual Studio Code ([VS Code]): available for free download at code.visualstudio.com. Install the extensions [Angular Language Service] (autocompletion and validation in templates [HTML]) and [Ionic] (commands for [Ionic] and [Capacitor] in the editor). Support for [TypeScript] is already integrated into [VS Code].
Chrome: the browser used to develop the application (google.com/chrome). Its developer tools (F12) display the application at phone size and also allow you to debug the application installed on the phone (see appendices).
MySQL 8 (or MariaDB): required only for the JSON server. Install it, for example, via Laragon (under [Windows]), XAMPP, or directly via MySQL Community Server. A graphical administration tool ([HeidiSQL], [phpMyAdmin], [MySQL Workbench], [DBeaver]...) makes the rest of the process easier. This course uses [Laragon].

2.2. Installing the Ionic client

With [Flutter], you had to install SDK: the framework, the [Dart] language, and their tools, which are common to all projects. With [Ionic], there is no SDK to install: [Angular], [Ionic], [Capacitor], the [TypeScript] compiler, and their command-line tools ([ng], [cap]) are simple [npm] packages, declared in each project’s [package.json] file and installed in its [node_modules/] folder. Each project thus has its own versions, and two projects can use different versions of [Angular] without interfering with each other.

Installing the [Ionic] client for a project therefore means installing its packages. In [VS Code], open the project folder (File menu / Open Folder, for example, the [examples_ionic] folder), then open a console (Terminal menu / New Terminal), and type:

1	`npm install`

This command downloads the packages described in [package.json] (along with their dependencies—several hundred packages, totaling a few hundred megabytes) in the exact versions listed in [package-lock.json]. You only need to run this command again if you add a package or change a version.

The project’s tools are then launched via [npx], which executes the command for a package installed within the project (without [npx], the console would search for a command installed system-wide). The [npx ng version] command verifies the installation of [Angular]:

1	`npx ng version`

The result looks something like this (here under [Linux]; under [Windows], the line [Operating System] displays [win32 x64]):

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI       : 22.2.1
Angular           : 22.2.1
Node.js           : 24.21.0
Package Manager   : npm 10.9.4
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 22.2.1            │ ^22.2.1           │
│ @angular/cli              │ 22.2.1            │ ^22.2.1           │
│ @angular/common           │ 22.2.1            │ ^22.2.0           │
│ @angular/compiler         │ 22.2.1            │ ^22.2.0           │
│ @angular/compiler-cli     │ 22.2.1            │ ^22.2.0           │
│ @angular/core             │ 22.2.1            │ ^22.2.0           │
│ @angular/forms            │ 22.2.1            │ ^22.2.0           │
│ @angular/platform-browser │ 22.2.1            │ ^22.2.0           │
│ @angular/router           │ 22.2.1            │ ^22.2.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 6.0.3             │ ~6.0.2            │
└───────────────────────────┴───────────────────┴───────────────────┘

The [Requested Version] column lists the versions requested by [package.json]; the [Installed Version] column lists the versions that [npm] actually installed. The versions from [Ionic] and [Capacitor] do not appear in this table, which is reserved for packages from [Angular]; the command [npm ls --depth=0] lists them all. The command [npx cap doctor] is the counterpart, for [Capacitor], of [flutter doctor]:

1	`npx cap doctor`

💊   Capacitor Doctor  💊

Latest Dependencies:

  @capacitor/cli: 8.5.2
  @capacitor/core: 8.5.2
  @capacitor/android: 8.5.2
  @capacitor/ios: 8.5.2

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/cli: 8.5.2
  @capacitor/core: 8.5.2
  @capacitor/android: 8.5.2

[Capacitor] compares the versions installed in the project to the latest published versions. The [@capacitor/ios] package is not installed: this course focuses only on [Android] (an application [iOS] is built on top of [Mac], using [Xcode]). Once the [Android] project has been created ([npx cap add android], see Example 01), the command also checks this project.

All that remains is to run the application in the same console:

1	`npm start`

then open the address [http://localhost:8100] in [Chrome]: there you will see the menu of the 25 examples (see Example 01). Unlike with [Flutter], there is no device to select: in the browser, the application is served by [ng serve]; on [Android], it is built and then installed by [Capacitor].

The [@ionic/cli] tool (optional). The [Ionic] team also releases a command-line tool, which is installed system-wide:

npm install -g @ionic/cli
ionic start
ionic serve
ionic capacitor run android -l --external

Line 1: Installs the [ionic] command;
line 2: creates a new project [Ionic] + [Angular] + [Capacitor] from a template ([blank]: a blank page, [tabs]: tabs, [sidemenu]: a side menu), by asking a few questions;
line 3: starts the development server (which itself calls [ng serve]);
line 4: builds the application, installs it on a device ([Android]), and reloads it whenever the code is modified ([-l], “live reload”); [--external] makes the development server listen on the computer’s address on the local network, which the phone can reach.

This is merely a convenience: [ionic] simply chains together the commands [ng] and [cap], and it requires a [ionic.config.json] file in the project (which is created by [ionic start], or by [ionic init] for an existing project). The projects in this course do not have one: they were created with [ng new] (see Example 01), and we use [ng] and [cap] directly, which are part of the project. This is the most straightforward way to see what is happening, and it does not depend on any tools installed on the computer.

We will now describe how to install the tools for developing [Android].

2.3. Android Studio and the Android command-line tools

The target device for this course is a [Android] phone. To build the [Android] application and install it on this phone, [Capacitor] requires SDK, [Android], and JDK (the [Java] compiler, used by the [Gradle] build tool), which are installed along with [Android Studio], the development environment for [Google]. [Android Studio] is not used for writing code (the editor remains [VS Code]): it is used here to install and update SDK and [Android], to create emulators, and, occasionally, to open the [Android] project created by [Capacitor] ([npx cap open android]).

[Android Studio]: Download it for free from developer.android.com/studio, then install it. When you launch it for the first time, the wizard will offer a standard installation: accept it, and it will download SDK and [Android].
Open [SDK Manager] from [Android Studio] (the [Tools / SDK Manager] menu when a project is open, or [More Actions / SDK Manager] from the home screen): This file installs and updates the components of SDK and [Android].
[SDK Platforms] tab: Verify that a recent [Android] platform is installed. [Capacitor] 8 compiles applications for API 36 ([Android] 16);
[SDK Tools] tab: Check [Android SDK Build-Tools], [Android SDK Platform-Tools] (which contains [adb], the tool that connects the computer to the device), [Android Emulator] (if you want to test on an emulator) and [Android SDK Command-line Tools (latest)] (which includes the tool [sdkmanager]), then click on [Apply].
Accept the licenses for SDK and [Android]: [Android Studio] automatically accepts them each time a component is installed. If the application build later fails due to an unaccepted license, accept all of them using the [sdkmanager] tool from the [Android SDK Command-line Tools] package by answering [y] to each question until the message “All SDK package licenses accepted.” (under [Windows], in [PowerShell]):

1	`& "$env:LOCALAPPDATA\Android\Sdk\cmdline-tools\latest\bin\sdkmanager.bat" --licenses`

JDK: [Capacitor] 8 requires JDK 21 or later. There’s no need to install one: [Android Studio] comes with its own, [JBR] (“JetBrains Runtime”), located in its [jbr] subfolder. In recent versions of [Android Studio], it’s a [Java] 25: it requires a minor adjustment to the [Android] project generated by [Capacitor] (upgrade to [Gradle] 9.1), as shown in Example 01.
Environment variables. [Capacitor] ([npx cap run android]) itself launches the build [Gradle] and the tool [adb]; it needs to know where SDK and JDK are located. Under [Windows], in Settings / System / System Information / Advanced System Settings / Environment Variables, create two user variables:
[ANDROID_HOME]: the folder for SDK and [Android]; by default, [C:\Users\<name>\AppData\Local\Android\Sdk] ([SDK Manager] displays this at the top of its window, [Android SDK Location]) ;
[JAVA_HOME]: the folder for JDK of [Android Studio]; by default, [C:\Program Files\Android\Android Studio\jbr].

Also add the [%ANDROID_HOME%\platform-tools] folder to the [Path] variable so that you can type [adb] in a console. If [Android Studio] is not installed in the default location, the [npx cap open android] command also requires the variable [CAPACITOR_ANDROID_STUDIO_PATH]: the path to the [studio64.exe] program. The new variables are only visible to consoles opened after they were created; you must restart [VS Code]. Check in a new console:

1 2	`adb version & "$env:JAVA_HOME\bin\java" -version`

2.4. Set up an Android emulator

If you don’t have a phone, you can test the app on an emulator [Android]: a virtual phone that runs in a window on your computer. [Android Studio] installs the program [Android Emulator] (if it was checked in [SDK Manager], see above) but does not provide a ready-to-use virtual device: you must create one.

[Prerequisites]: Virtualization must be enabled in the computer’s [BIOS], and under [Windows], the [Windows Hypervisor Platform] feature must be checked ([Control Panel / Programs / Turn Windows features on or off]), which requires a restart. Otherwise, the emulator will not start or will remain very slow;
Open [Device Manager] from [Android Studio]: [More Actions / Virtual Device Manager] from the home screen, or [Tools / Device Manager] when a project is open (depending on the version: [View / Tool Windows / Device Manager]);
click on [Create Device], select a template (for example, [Pixel 8]), then [Next]. Select a recent system image, [Android], for the [x86_64] processor and download it using the [Download] link located next to it, then [Next] and [Finish];
start the emulator using the [Play] button on the [Device Manager];
wait until the [Android] welcome screen appears in the emulator window: the first startup may take several minutes.

Next, verify that the computer recognizes the emulator. There are two commands to do this:

1 2	`adb devices npx cap run android --list`

Line 1: [adb] lists the devices connected to the computer, one per line: their identifier (for example, [emulator-5554] for the first emulator) followed by their status, which should be [device];
Line 2: In the folder of a [Capacitor] project ([examples_ionic], for example), [Capacitor] lists the devices on which it can install the application: devices that are connected and running, as well as emulators created in [Android Studio], even if they are shut down (it knows how to start them). This is the counterpart to [flutter devices].

[Note]: If [adb devices] displays the emulator with the status [offline], the emulator has not finished booting, or [adb] is in an inconsistent state. Try the following in order: (1) wait for the welcome screen to appear, then rerun the command; (2) restart [adb] using the following three commands (under [Windows], within [PowerShell]), the last one should display [device] and not [offline]; (3) In [Device Manager], select [Cold Boot Now] from the device’s [⋮] menu, or even [Wipe Data] as a last resort.

1
2
3

& "$env:LOCALAPPDATA\Android\Sdk\platform-tools\adb.exe" kill-server
& "$env:LOCALAPPDATA\Android\Sdk\platform-tools\adb.exe" start-server
& "$env:LOCALAPPDATA\Android\Sdk\platform-tools\adb.exe" devices

If the problem persists, use [where.exe adb] to verify that no other [adb], of a different version, is present in the [Path]: Two versions of [adb] competing for the connection cause this issue.

Once the emulator is recognized, the application installs itself on it and launches using the following command, located in the project folder, after [npx ng build] and [npx cap sync android] (see Example 01) ; [--target] identifies the device by its ID; otherwise, the command prompts you to select one:

1	`npx cap run android --target emulator-5554`

On the emulator, the computer running it has the address [10.0.2.2]: this is where the application will look for the server JSON (see Example 22).

2.5. Preparing the Android Phone

To run the app on a real phone with the address [Android], the phone must be set to be controlled from the computer:

enable developer options: open [Settings / About phone], then tap [Build number] several times (usually 7) until the phone indicates that you are a developer. The exact labels vary by manufacturer;
enable [USB debugging] in the [Developer options] (menu added in the previous step);
Connect the phone to the computer using a USB cable that transfers data (not just charges the phone), and accept the USB debugging authorization request on the phone. In [Windows], if the phone is not recognized, install the manufacturer’s driver USB (“OEM USB drivers,” see developer.android.com/studio/run/oem-usb);
check that the computer detects the phone: it should appear, with the status [device], in the list displayed by [adb devices] (the status [unauthorized] means that the authorization request was not accepted on the phone), and in the list displayed by [npx cap run android --list].

The phone will access the server [NestJS] via the computer’s address IP on the local network (and not via [localhost], which, from the phone’s perspective, is the phone itself): This configuration is described in Example 22 and in the “Deployment” chapter.