【Angular】ngx-highlightjs v4.1.0以降へマイグレするときのメモ


2021/06/02
蛸壺の技術ブログ|ngx-highlightjs v4.1.0以降へマイグレするときのメモ

ふと思いつきでメンテナンスし時な古いAngularプロジェクトで使っていた
ngx-highlightjsのバージョンを久々に引き上げると、以下のような謎エラーがライブラリ側から発生します。

            
            [HLJS]  The core library was not imported!
        
どうも本家highlightjsでv9からv10以降にかけて大きな仕様変更があったようで、ngx-highlightjs@4.1.0以降では内部のライブラリインポートの作法も変更になっているようです。

今回はhighlightjs@10以降およびngx-highlightjs@4.1.0以降への引き上げ方法を防備録として残します。


ライブラリローダの選択

ngx-highlightjsでも記述されている通り、highlightjsの内部ライブラリを読み込みする際には、大きく分けてfullLibraryLoadercoreLibraryLoaderで呼び出すことが必要になりました。

前者が登録された全ての言語スタイルを呼び出すスクリプトで、後者がコアスクリプトから個別の言語を選択できるスクリプトです。

全ての言語スタイルを読み込むのは重いので、ここでは
coreLibraryLoaderを使う前提で説明していきます。

公式にもあるように、対象のAngularモジュールのコードに、

            
            import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';

@NgModule({
    imports: [
        HighlightModule
    ],
    providers: [
        {
        provide: HIGHLIGHT_OPTIONS,
        useValue: {
            //👇ライブラリローダ追加
            coreLibraryLoader: () => import('highlight.js/lib/core'),
            languages: {
                typescript: () => import('highlight.js/lib/languages/typescript'),
                css: () => import('highlight.js/lib/languages/css'),
                xml: () => import('highlight.js/lib/languages/xml')
            }
        }
        }
    ],
})
export class AppModule { }
        
となるように追加します。

ここでもし、
highlight.js/lib/core.jsというファイルが無いとコンパイル時などに怒られたりする場合には、highlightjsがv9より以前のバージョンのままですので、v10以降にバージョンアップさせておきます。

この記事の執筆時点でhighlight.jsのv11が最新になってしまいましたが、ひとまずhighlight.js@10.7.2辺りを入れてコンパイルできるか試してみます。

この時点でhighlight.jsでhtmlがスタイリングされていたら成功ですが、現状でAngular9以前のプロジェクトではコンパイル出来るものの、highlight.jsが効いてない...となっているかも知れません。


v4.1.0-betaを使い回す > Angular/typescriptのバージョンはどこまで引き上げる?

ngx-highlightjsのプロジェクトはかなりメンテナンスが遅く、v4.1.0以降は非常に不安定でバグがあっても未対応で放置される可能性が大です。

おそらくはtypescriptも古いはずですので、プロジェクト自体のAngularのバージョンを大工事前で一番安定している4.1.0-betaでどこまで引き上げることができるか地道に独自調査してみます。

            
            (プロジェクトのスタート時)angular@^9.0.0 & typescript@~3.9.0
    > angular@~10.0.0 ...OK
    > angular@~10.1.0 ...OK
    > typescript@~4.0.0 ...OK
    > angular@~10.2.0 ...OK
    > angular@~11.0.0 ...OK
    > angular@~11.1.0 ...OK
    > angular@~11.2.0 ...OK
    > angular@~12.0.0 & typescript@~4.2.0 ...NG(ビルドエラー!)
        
ということで、Angular11までなら4.1.0-betaのままでも利用できることが分かりました。どちらかというと、Angularのせいというよりはtypescriptの問題かと思います。

ngx-highlightjsがAngular12にはまだ未対応ですので、結果としては十分な気がします。


まとめ

2020年6月時点で、ngx-highlightjsを使う場合にはv4.1.0-betaを継続的に扱うほうが賢明です。

Angular12に対応するのはまだ未定ですが、そこら辺はプロジェクトのメンテナンス具合を見ながら恐る恐る試してみてください。

とはいえ、Angular12からtypescript4.2標準になったことで、かなりのサードパーティ製のライブラリが同じような症状で動かなくなる可能性もある気がします。

Angular12へアップグレードする場合にはより慎重性が問われるかも知れません。


Angularの学び方

主要なJavascriptのフレームワークの一角であるAngularは、現在Google主導で開発が進められている玄人フロントエンジニア向けのフレームワークです。

Angularを使えばかなり高度なWebアプリも自由に作成できるのですが、やはり初心者が独学で勉強しようとおもうとかなりの知識が必要でAngularは挫折しやすいと言われています。

特にAngularを使う上で注意が必要なのは半年に一回のペースでプログラムのメジャーバージョンが繰り上がるので、他のフレームワークと比べても格段に技術を追っかけるスピードが早いことも躓く人が多い一因になっているとも思います。

Udemyの動画講座では、基礎からじっくり学べるためより実践的なスキルを身につけることが可能です。

以下の講座ではAngular初心者向けに簡単なプロジェクトの作成まで学ぶことができます。

より実践的にフロントエンジニアとして重宝されるためにはSPA(シングルページアプリケーション)をある程度作成できるスキルが必要になりますので、さらに学びたい方は以下のような講座も用意されています。

他にもAngularプログラミングの習得度に応じた講座も多数用意されているので、必要に応じて試されてはいかがでしょうか。
記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。