カテゴリー
【Angular】ngx-highlightjs v4.1.0以降へマイグレするときのメモ
※ 当ページには【広告/PR】を含む場合があります。
2021/06/02
2022/08/10
ふと思いつきでメンテナンスし時な古いAngularプロジェクトで使っていた
[HLJS] The core library was not imported!
どうも本家
今回はhighlightjs@10以降およびngx-highlightjs@4.1.0以降への引き上げ方法を防備録として残します。
ライブラリローダの選択
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この記事の執筆時点で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でフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー