using ionic via AngularCLI

introduction

ionic has long been a UI framework that use Angular and cordova. But the latest version is based on webComponents, and can be available on react, vue or vanilla js, even if without ionic CLI.

It's great. But the number of configuration patterns increases and we may get lost. Even on the basis of Angular, there are 3 patterns available at least.

1. Use the ionic CLI (as usual)
2. Include @ionic/core in script tag and use as pure WebComponent
3. Install and use @ionic/angular in the AngularCLI project

In this article I will take up number three. After incorporating it as NPM package, it is like developing with the usual ng command.

note: this article is translation written by Japanese on June 2019.

install

Install it first. It is a premise of the project created by AngularCLI.

$ npm install @ionic/angular

You can see the description that ng add @ionic/angular seems to be possible, but it is no good with Anuglar v8. As far as I saw the code, I think it's ok to catch up on the schema change of angular.json. But I thought that we should wait for a while because ionic v4 is intense renewal.

It seems that there is an original layer of * .page.ts and so on in ionicCLI, but it feels like not to think that way in this way. Because purpose is to develop by AngularCLI.

There is another package @ionic/angular-toolkit which provides cordva and schematics plugins, but at the moment it seems to be unnecessary. cordva doesn't need to be a simple web app, and schematics is a decision to wait a little more as described above. Maybe it will be able to generate not only ng add but also * .page.ts etc.

Configuration

It is OK if you import NgModule normally. Since it is WebComponent, add CUSTOM_ELEMENTS_SCHEMA to uncheck Angular's template compiler.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicModule } from '@ionic/angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Import the style into the root css file. The author has raised Angular CLI in scss. please replace each one.

/* 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";

/* 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";
@import "~@ionic/angular/css/display.css";

The icon implementation needed some tricks. As reference was not solved, I copy to assets and use.
Here is the schematics code that implements ng add @ionic/angular are very helpful. I will pick it up and copy it manually.

angular.json

{
  "projects": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
          }
        }
      }
  }
}

Describe relative URL in the icon tag.

<ion-item button routerLink="/home">
    <ion-icon slot="start" src="/assets/svg/md-home.svg"></ion-icon>
    <ion-label> Home </ion-label>
</ion-item>

That's it! Basically, it is good to make the ng add code of schematics a textbook. The ng add @ ionic/angular command itself does not work, but it is best for reference.