❄️

ionicをWebComponentsで使う

2024/08/02に公開

Angular

Web Components

Ionic

tech

※本記事は終了した別サービスで2019年6月10日に公開した記事のリストアです。

ionicは長らくAngularとcordovaを用いたUIフレームワークでしたが、最新バージョンではwebComponentsベースになり、reactでもvueでも生jsでもなんでもいけるようになりました。

素晴らしいんですが、逆に構成パターンがめっちゃ増えて迷うというところもあります。
Angularをベースにする上でもパッと3パターンがありえます。

ionic CLIを用いる（従来通り）
scriptタグで@ionic/coreをインクルードしてピュアWebComponentとして利用する
angularCLIプロジェクトに@ionic/angularをインストールして利用する

本記事では3番を取り上げます。普通にnpmPackageとして組み込むだけで、組み込んだ後はいつものngコマンドで開発します。

インストール

最初にインストールします。angularCLIで作成したプロジェクトの前提です。

$ npm install @ionic/angular

ng add @ionic/angularができそうな記述も見られますが、Anuglar v8ではダメです。さっとコードを見た限りだとangular.jsonのスキーマ変更をキャッチアップすればいけそうな感もありましたが、ionic v4はもはや別ライブラリでは？というくらい内部的には激しい刷新が行われているので焦らず待ちましょうという判断しました。

ionicCLIでは*.page.tsとかの独自レイヤーがあるようですが、このやり方ではそういうのは考えない感じです。

他にも@ionic/angular-toolkitというcordvaやschematicsのプラグインを提供しているパッケージがありますが、現時点では要らなそうです。cordvaはただのwebアプリなら要らないですし、schematicsは上述のようにもう少し待ちましょう判断です。もしかしたらng addだけでなく*.page.tsとかをng generateできるようになるのかな。

コンフィグレーション

普通にNgModuleをimportすればOKです。WebComponentなので、Angularのtemplateコンパイラチェックを外すためにCUSTOM_ELEMENTS_SCHEMAを加えます。

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 {}

ルートのcssファイルにスタイルをインポートします。著者はscssでAngularCLIを起こしていますが、それぞれ置き換えてください。

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

アイコンは若干トリックが要りました。参照解決してくれなかったのでassetsにコピーして利用しています。
この辺りは、ng add @ionic/angularを実装しているschematicsのコードが大変参考になります。というか、ピックアップして手動でコピペします。

angular.json

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

アイコンタグでは相対URLを記述します。

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

以上となりますが、基本的にはschematicsのng addのコードを教科書にして構成するとよいです。ng add @ionic/angularコマンドそのものは動きませんが、リファレンスには最適です。

インストール

コンフィグレーション

Discussion