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の１つを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676555/a6b9f2f2-dae2-0ccf-17d1-5bc1323af549.png)

2. 右上のCodeを開き、四角が２つ重なったボタンを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676555/4a088077-14d6-27aa-08a3-9e5d3f1b08bf.png)

3. コピーしたURLをもとにgit clone します。
```
git clone git@github.com: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を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676555/e3ea275f-a31e-f2de-ffbc-6fc92d832c46.png)

2. 下にスクロールしてPrevious Releasesを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676555/9768d96a-91d0-1898-cff3-d4d0845338cc.png)

3. v18系統のReleasesを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676555/69eb1655-359b-8434-0556-241b67e20f2a.png)

4. 対応するCPUのLinux用ファイルを選ぶ(ここではx64のtar.gzファイルを選択)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676555/05ec7d8f-d4f5-5567-9200-024caf18b388.png)

手順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の翻訳に関わる方の一助になれば幸いです。