Angular18でZurb Foundation 6を動作させる方法

概要

CSSフレームワーク、Zurb Foundation6で動いているサイトをデザインそのままでAngularに移行したい場合もあると思います。
AngularJSを使ったサイトからAngular18へ移行に成功したのでその手順を載せたいと思います。
一通り検索しましたが解決した方法が書いてある記事が無かったため書くことにしました。

環境

• フロントエンド
  移行前: AngularJS+Foundation6+jQuery3.7.1
  移行後: Angular18(SSR)+Foundation6+jQuery3.7.1
• サーバーサイド
  SpringBoot3(RESTfulAPI)
• httpサーバー
  Nginx

手順

jQueryとFoundationはHTML上で読み込む。

index.html

<!-- jquery -->
<script src="/assets/js/lib/jquery/jquery-3.7.1.min.js"></script>

<!-- foundertion -->
<script src="/assets/js/lib/foundation/foundation.min.js"></script>

色々な読み込み方法がありますがHTML上で読み込む方法に最終的に落ち着きました。

TypeScript上で読めるようにする。

declareで宣言をし、コンポーネント上で$が使えるようにしておきましょう。
これで基本的にはjQueryがつかえるようになります。

example.ts

declare var $ :any

ページの切り替えタイミングでfoundationを実行する

ページ全体をルーティングしているTOPページの切り替えタイミングを利用しFoundationを有効化させます。
具体的にはngOnChangesメソッドの実行時に有効化させます。
これで大半のページはFoundationのデザインで動作しました。

app.component.ts

import {OnChanges} from '@angular/core';
//...
declare var $ :any
export class AppComponent implements OnChanges {
  ngOnChanges(changes:any) {
    $(document).foundation();
  }
//...
}

こんな感じ

ngOnChangesで動作しないネストされたテンプレートページにも対応させる

routerで切り替えて表示させているページの更に下層にあるテンプレートhtmlはページ切り替えタイミングでfoundationを動作させることができません。
例えば特定ジャンルにだけ表示するheader等は画面が表示される前にfoundationが実行されているっぽいです。
テンプレートページ表示時（ngOnInit）に自分から読み込ませればいいじゃないかと思うのですがbuildするときは構文しか見ていない為、HTMLを読み込まず宣言しているjQueryにエラーが出てしまいます。
そこでisPlatformBrowserを使うことでHTML上で展開しているときのみjQueryを実行させるように分別させます。

header.component.ts

import { isPlatformBrowser } from '@angular/common';
declare var $ :any;
//...
export class HeaderComponent { 
  public isBrowser: boolean = false
//...
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Inject(DOCUMENT) private document: Document
  ) {
    this.isBrowser = isPlatformBrowser(platformId);
  }
//...
  ngOnInit() {
    if(typeof $ !== undefined){
      if (this.isBrowser) {
        $(this.document).foundation();
      }
    }
  }
//...
}

これでngOnInit時でもテンプレートに対してfoundationを実行してくれるようになりました。

二重実行で挙動がおかしくなる。

オーバーレイページなどがどんどん増えてしまうことがあります。
部分的にjQueryのremoveなどを入れて対処しました。

etc.component.ts

  ngOnInit() {
    if(typeof $ !== undefined){
      if (this.isBrowser) {
        if($('.reveal-overlay').length){
          $('.reveal-overlay').remove();
        }
        $(this.document).foundation();
      }
    }
  }

jQueryで動かしているアニメーション等

@Componentのanimations: []ですべて代替できました。
jQueryはあくまでFoundationを動作させるため以外には使わないほうが良いと思います。

対応後の感想

対症療法のようなプログラムですがAngularは柔軟に対応できることに驚きました。
AngularJSがEOLである為、実務でAngular2+へ再構築しなければいけなかったのですが、プログラムは組みなおすにしてもデザインもそのままで移行できるのか？という課題がありました。
デザインの問題で古いフレームワークから離れられないWebページもあると思います。
今回のちょっとした調査でFoundationはAngular18でも完全動作させることができました。
全ての状況下に対応できるかはわかりませんが参考になれば幸いです。