BETA

ionicをAngulaCLIで使う

投稿日:2019-06-09
最終更新:2019-06-10

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コマンドそのものは動きませんが、リファレンスには最適です。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@studioTeaTwoの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!