2019-06-10に更新

ionicをAngulaCLIで使う

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

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

  1. ionic CLIを用いる(従来通り)
  2. scriptタグで@ionic/coreをインクルードしてピュアWebComponentとして利用する
  3. 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 "[email protected]/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "[email protected]/angular/css/normalize.css";
@import "[email protected]/angular/css/structure.css";
@import "[email protected]/angular/css/typography.css";

/* Optional CSS utils that can be commented out */
@import "[email protected]/angular/css/padding.css";
@import "[email protected]/angular/css/float-elements.css";
@import "[email protected]/angular/css/text-alignment.css";
@import "[email protected]/angular/css/text-transformation.css";
@import "[email protected]/angular/css/flex-utils.css";
@import "[email protected]/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コマンドそのものは動きませんが、リファレンスには最適です。

Originally published at studioteatwo.qrunch.io

studioTeaTwo

More features, more future.

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント