久々にAngularで作ろうとしたら、設定することがこまごまあったのでメモ兼ねてまとめ。
環境は以下の通り。
- VSCode
- angular-cli 6.0.8
- angular:6.0.3
newするときにスタイルをscssに設定
プロジェクトはangular-cliで作りますが、cssではなくscssで作りたいのでプロジェクト作成時に設定します。
ng new プロジェクト名 --style=scss
コードの修正
ng newでプロジェクトを作った直後だとなぜかng testとng e2eが通らないので以下の2箇所を修正します。
src/app/app.component.ts/9行目
title = 'app'; // appをプロジェクト名と同じに変更
src/app/app.component.spec.ts/19行目
expect(app.title).toEqual('app'); // appをプロジェクト名と同じに変更
.htmlhintrcの作成
angularのテンプレートとしてhtml使っているため、HTMLHint使ってると警告が出ます。
なので、.htmlhintrcをプロジェクト直下に作って部分的に警告を出さないように設定を記述します。
.htmlhintrc
{
"tagname-lowercase": true,
"attr-lowercase": false,
"attr-value-double-quotes": true,
"doctype-first": false,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"attr-no-duplication": true,
"title-require": true
}
angularの属性はlowercaseじゃないものも使うため"attr-lowercase"と、
部分的なHTMLのため先頭にDOCTYPE書かないので"doctype-first"をfalseにします。
git-hookの設定
プッシュするときにテストを実行させてからプッシュしたいので、.git/hooks/pre-pushに以下のコマンドを記述します。
ng test --watch=false
ng e2e
ng testのほうは--watch=falseをつけないとテスト後に処理が終了しません。
npm shrinkwrap
Angularだからというわけではないですが、勝手にバージョンが変わらないようにnpm shrinkwrap実行してnpm-shrinkwrap.jsonを作っておきます。
後はgitlab-ciの設定とかもしたけど、それは別記事でまとめる予定です。
(7/17追記)gitlab-ciの設定についてまとめました。
https://qiita.com/frost_star/items/efd624d35edd2aef4379