albatrosary's blog

Azure, Angular, CI 最近は Swagger も仲間入り

To use Webpacker with Angular

もくもく会@ng_kobe#2 でやったことをまとめます。「Webpacker is 何?」ってところからどうも Ruby on Rails で Angular プロジェクトが作れるらしいものがあるということで少し触ってみた。ドキュメントを読む限りでは「はろーわーるど」的なものは簡単に作れそうな雰囲気がしました。で、こいつがどこまでやってくれるのかが気になるところです。

github.com

Angular プロジェクトの生成

はじめに Rails でプロジェクトを作成します。このとき --webpack=angular と指定しておきます。

rails new --webpack=angular rails-angular
cd rails-angular
./bin/rails s

ビルドが完了し簡易サーバが起動したらブラウザで http://localhost:3000/ を開くと「はろーわーるど」的な画面が表示されます(まだ Angular は実行されてません)。

f:id:albatrosary:20180113204842p:plain

Controller の追加

Railsジェネレータを使ってコントローラーを生成します。

bundle exec rails g controller pages index

http://localhost:3000/pages/index を開くとコントローラーの「はろーわーるど」的な画面が表示されます(まだ Angular は実行されてません)。

f:id:albatrosary:20180113204905p:plain

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 アプリが起動します。

f:id:albatrosary:20180113204930p:plain

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.tspolyfills.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 は駄目なんじゃないかな?という雰囲気もあり悶々としました。おしまい

ng-kobe.connpass.com