angular-ja(Angular日本語化プロジェクト)の主にビルド環境構築でつまづいたところ

はじめに

仕事でAngularを使い始めて5年(AngularJSも含む)ほどになりますが、何らかの形で恩返ししたいと思い、ドキュメントの日本語化プロジェクトであるangular-jaに入れてもらうことになりました。先程初のプルリクエストを投げて、レビューの結果待ちです。
さて、プルリクエストを投げるまでに、色々とつまづいたところがありました。
コントリビューター向けのドキュメントとしては
https://github.com/angular/angular-ja/blob/main/CONTRIBUTING.md
があるのですが、これだけだと分からない点も色々ありましたので、備忘録として残しておきます。ちなみに筆者はGitHub初心者だということも断っておきます。

ブランチではなくフォークを用いる

このプロジェクトで作業する際は、翻訳案件用のブランチを作成するのではなく、
GitHub上でリポジトリをフォークして、そこからクローンして、作業を行います。
恐らくですが、issueで案件単位で管理しているので、ブランチを使わなくても修正箇所を把握でき、同じファイルを編集するとは考えにくく、担当者単位で作業できれば問題ないので、フォークを使っていると思われます。

フォークする方法については以下に書いてあります。
https://docs.github.com/ja/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo

フォークした後は、以下の手順でクローンします。

1. Forkのプルダウンを選択し、Existing forksの１つを選択します
   

2. 右上のCodeを開き、四角が２つ重なったボタンを選択します
   

3. コピーしたURLをもとにgit clone します。

git clone [e-mail]:XXXXXX/angular-ja.git

(XXXXXXはクローンしたユーザー名)

ビルド環境のOSはLinuxを用いる

後述する

$ yarn build

で、ドキュメントやサンプルコードをビルドし、成果物のWebサイトを生成することが可能ですが、Windows 10/11だとビルドする際に、エラーとなります(エラーメッセージが文字化けして対処方法が分からないです)。
ビルドする際はLinux環境が必要になります。ディストリビューションはプロジェクトのオーナーさんも使っているUbuntuがおすすめになります(私はバージョン22.04.3で環境を構築しました)。また、Red Hat Enterprise Linux release 9.3でも動作を確認しています。
Macでは試せていないです。

Node.jsのバージョン

Node.jsはバージョン18系統を入れる必要があります。
そうしないと後述するyarnコマンド実行時、以下のようなエラーが表示されます。

$ yarn
yarn install v1.22.21
[1/5] Validating package.json...
error angular-ja@0.0.1: The engine "node" is incompatible with this module. Expected version "^18.16.0". Got "20.11.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

古いNode.jsをインストールするためには以下の手順を実行します。

1. Other Downloadsを選択する
   

2. 下にスクロールしてPrevious Releasesを選択する
   

3. v18系統のReleasesを選択する
   

4. 対応するCPUのLinux用ファイルを選ぶ(ここではx64のtar.gzファイルを選択)
   

手順4でバイナリのtar.gzファイルをダウンロードした後は展開し、環境変数PATHに展開されたbinディレクトリを追加します(ディストリビューションによってやり方が違うため詳細は割愛します)。

yarnのインストール

成果物のビルドを行うために、npmではなくyarnを用います。
yarnについては以下の記事の説明が分かりやすかったです。
https://qiita.com/akitaaa/items/c97ff951ca31298f3f24

インストールするには以下のコマンドを入力します。(Linuxのパッケージとなっているものはバージョンが古いです。)

npm install -g yarn

package.jsonのあるディレクトリで

$ yarn

とすることで、npm installと同様の動きをします。

yarn start時のエラーの対処

Linux環境だと、

$ yarn build

は成功しますが、そのままだと

$ yarn start

で以下のエラーが表示され、ビルド結果の確認ができません。

ERROR: <builtin>: BazelWorkspaceStatusAction stable-status.txt failed: Failed to determine workspace status: Process exited with status 1
Could not read configuration file at /home/smiura/angular-ja/origin/.ng-dev/config.mjs

'origin/.ng-dev/config.mjs'が読み込めないと怒られています。origin/.ng-devディレクトリの中にはconfig.mtsというTypeScriptファイルがありますがconfig.mjsがありません。よって、config.mtsを何とかconfig.mjsに変換する必要があります。そこでクローン先のディレクトリで以下のコマンドを実行します。

$ npm install -g typescript
$ cd origin/.ng-dev
$ tsc --module es2020 config.mts

tscコマンド実行時、エラーが出ても無視してください。上記コマンドでconfig.mjsを作ることができます。config.mjsを生成できれば、yarn startも実行できるはずです。

最後に

主にビルド環境を整えるために苦労しましたが、なんとか形を作ることができました。環境さえできてしまえば、後は翻訳をガンガン進めていけば良いはずです。
用意されているドキュメントだと、分からないことも色々あると思いますので、この記事が、今後Angularの翻訳に関わる方の一助になれば幸いです。