Add Ionic to an Angular workspace

Use Ionic mobile app alongside webapp and share libraries.

Published: 7/7/2024 
ng new my-workspace --no-create-application

cd my-workspace
ng generate application app-my-ionic-1
ng generate application app-my-ionic-2
npm install @ionic/angular
npm install @ionic/angular-toolkit --save-dev

Do for both Ionic apps

// app.component.ts

import { Component } from '@angular/core';
import {
  IonApp,
  IonHeader,
  IonToolbar,
  IonContent,
  IonTitle,
  IonIcon,
  IonButton,
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { bugOutline } from 'ionicons/icons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    IonIcon,
    IonButton,
    IonContent,
    IonTitle,
    IonToolbar,
    IonApp,
    IonHeader,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'app-my-ionic-1';

  constructor() {
    addIcons({ bugOutline });
  }
}
<!-- app.component.html -->

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title> My Ionic App </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <p>Welcome to Ionic with Angular!</p>
    <ion-button shape="round">
      <ion-icon slot="icon-only" name="bug-outline"></ion-icon>
    </ion-button>
  </ion-content>
</ion-app>
// app.config.ts

import { ApplicationConfig } from '@angular/core';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
import {
  IonicRouteStrategy,
  provideIonicAngular,
} from '@ionic/angular/standalone';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    provideRouter(routes),
  ],
};
// styles.scss

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "@ionic/angular/css/normalize.css";
@import "@ionic/angular/css/structure.css";
@import "@ionic/angular/css/typography.css";
@import "@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import "@ionic/angular/css/padding.css";
@import "@ionic/angular/css/float-elements.css";
@import "@ionic/angular/css/text-alignment.css";
@import "@ionic/angular/css/text-transformation.css";
@import "@ionic/angular/css/flex-utils.css";

/**
 * Ionic Dark Mode
 * -----------------------------------------------------
 * For more info, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

/* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import "@ionic/angular/css/palettes/dark.system.css";

Prereqs: Install the Ionic cli globally npm install -g @ionic/cli

From the app root, this will create ionic.config.json

  • ionic init --multi-app

Add the projects:

// ionic.config.json

{
  "projects": {
    "app-my-ionic-1": {
      "name": "My Ionic App 1",
      "integrations": {
        "capacitor": {}
      },
      "type": "angular"
    },
    "app-my-ionic-2": {
      "name": "My Ionic App 2",
      "integrations": {
        "capacitor": {}
      },
      "type": "angular"
    }
  }
}

IMPORTANT: This setup will not support multiple capacitor projects, despite supporting multiple Ionic projects.

npm install @capacitor/android @capacitor/app @capacitor/core @capacitor/haptics @capacitor/ios @capacitor/keyboard @capacitor/status-bar

npm install @capacitor/cli --save-dev

Each of these commands does the same thing, building to: ./dist/app-my-ionic-1

  • ng run app-my-ionic-1:build
  • ng build --project="app-my-ionic-1"

Create the capacitor.config.ts:

  • npx cap init
  • Edit: replace webDir: 'www' by webDir: 'dist/app-my-ionic-1/browser',
  • Set the appName: 'app-my-ionic-1'
# add, to ./ios folder
ionic capacitor add ios --project="app-ionic"

# run with simulator, device emulator
ionic capacitor run ios --project="app-ionic"

# open project with xcode
ionic capacitor open ios --project="app-ionic"
# add, to ./android folder
ionic capacitor add android --project="app-ionic"

# run with simulator, device emulator
ionic capacitor run android --project="app-ionic"

# open project with android studio
ionic capacitor open android --project="app-ionic"

See the github for a full list of available plugins:

npm install @awesome-cordova-plugins/core
npm install @awesome-cordova-plugins/background-mode
npm install @awesome-cordova-plugins/network