もくもく会@ng_kobe#2 でやったことをまとめます。「Webpacker is 何？」ってところからどうも Ruby on Rails で Angular プロジェクトが作れるらしいものがあるということで少し触ってみた。ドキュメントを読む限りでは「はろーわーるど」的なものは簡単に作れそうな雰囲気がしました。で、こいつがどこまでやってくれるのかが気になるところです。
Angular プロジェクトの生成
はじめに Rails でプロジェクトを作成します。このとき --webpack=angular と指定しておきます。
rails new --webpack=angular rails-angular cd rails-angular ./bin/rails s
ビルドが完了し簡易サーバが起動したらブラウザで http://localhost:3000/ を開くと「はろーわーるど」的な画面が表示されます（まだ Angular は実行されてません）。
Controller の追加
Railsジェネレータを使ってコントローラーを生成します。
bundle exec rails g controller pages index
http://localhost:3000/pages/index を開くとコントローラーの「はろーわーるど」的な画面が表示されます（まだ Angular は実行されてません）。
Angular アプリケーションの読み込み
ファイル app/views/pages/index.html.erb を編集します。
<h1>Pages#index</h1> <p>Find me in app/views/pages/index.html.erb</p> <hello-angular>Loading...</hello-angular> <%= javascript_pack_tag 'hello_angular' %>
編集終わったらブラウザをリロードするとAngular アプリが起動します。
import { Component } from '@angular/core';
@Component({
selector: 'app-angular',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent {
name = 'Angular!';
}
import './polyfills.ts' の移動
app/javascript/hello_angular/index.ts を見ると
import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic().bootstrapModule(AppModule);
});
とあり「いやいやいや」という感じがありましたので app/javascript/polyfills/index.ts を作り index.ts に polyfills.ts の内容を書き移し更に app/views/pages/index.html.erb を
<h1>Pages#index</h1> <p>Find me in app/views/pages/index.html.erb</p> <app-angular>Loading...</app-angular> <%= javascript_pack_tag 'polyfills' %> <%= javascript_pack_tag 'hello_angular' %>
としてやりました。ここまででアプリが動かせるようになりましたが
- AoTビルド
- Lazy Load
- lint
- ユニットテスト
- e2e テスト
は？ってことで先ずは Karma と tslint の設定をします。
Karma と tslint の追加
基本的には AngularClass から設定を拝借し追加した内容はこちら：
https://github.com/albatrosary/rails-angular/commit/6cdffe9ecb8cdda30b6338a88d9d508bb8ef3648
最後に
ここまでで、もくもく会の時間が終わりましたので終了です。ここまでの感想としてはせっかくの Angular CLI が有効に利用できないためこれで Angular を開発する意味あるの？と思う。AoTビルドはいけるとして Lazy Load は駄目なんじゃないかな？という雰囲気もあり悶々としました。おしまい
