@ionic/angular

Ionic Angular specific building blocks on top of @ionic/core components.

Related

• Ionic Core Components
• Ionic Documentation
• Ionic Discord
• Ionic Forum
• Ionicons
• Stencil
• Capacitor

License

• MIT

Testing Local Ionic Framework with ng add

This guide shows you how to test the local Ionic Framework build with a new Angular application using ng add. This is useful for development and testing changes before publishing.

Prerequisites

• Node.js and npm installed
• Angular CLI installed globally (npm install -g @angular/cli)

Build Local Ionic Framework

1. Clone the repository (if not already done):

   shCopy

   git clone https://github.com/ionic-team/ionic-framework.git
   cd ionic-framework
   

2. Pull the latest from main

   shCopy

   git pull origin main
   

3. Install dependencies and build the core package:

   shCopy

   cd core
   npm install
   npm run build
   

4. Install dependencies, sync the core build and build the Angular package:

   shCopy

   cd ../packages/angular
   npm install
   npm run sync
   npm run build
   

5. Create a tarball:

   shCopy

   npm pack
   

6. Copy the tarball to Downloads:

   shCopy

   cp ionic-angular-*.tgz ~/Downloads/ionic-angular.tgz
   

Test with New Angular App

7. Create a new Angular app:

   shCopy

   # Change to whichever directory you want the app in
   cd ~/Documents/
   ng new my-app --style=css --ssr=false
   cd my-app
   

8. Install the local @ionic/angular package:

   shCopy

   npm install ~/Downloads/ionic-angular.tgz
   

9. Run ng add:

   shCopy

   ng add @ionic/angular --skip-confirmation
   

10. Serve the app:

    shCopy

    ng serve
    

The local Ionic Framework build is now active in the Angular app. Changes to the Ionic source code require rebuilding the packages and reinstalling the tarball to see updates.

Project Structure

common

This is where logic that is shared between lazy loaded and standalone components live. For example, the lazy loaded IonPopover and standalone IonPopover components extend from a base IonPopover implementation that exists in this directory.

Note: This directory exposes internal APIs and is only accessed in the standalone and lazy submodules. Ionic developers should never import directly from @ionic/angular/common. Instead, they should import from @ionic/angular or @ionic/angular/lazy.

standalone

This is where the standalone component implementations live. It was added as a separate entry point to avoid any lazy loaded logic from accidentally being pulled in to the final build. Having a separate directory allows the lazy loaded implementation to remain accessible from @ionic/angular/lazy for backwards compatibility.

Ionic developers can access this by importing from @ionic/angular.

lazy

This is where the lazy loaded component implementations live.

Ionic developers can access this by importing from @ionic/angular/lazy.

[!CAUTION] The lazy loaded build, including IonicModule, is deprecated and will be removed in a future major version. New code should use the standalone components and provideIonicAngular() imported from @ionic/angular.