angularfire2を動かす 2017/1

2017/01/11 に Qiita に投稿した記事のアーカイブです。本文中のリンクは動作しないことがあります。

@armorik83 です。angularfire2の導入にえらく手間取ったので正しいインストール方法をメモしておきます。ただしこれは 2017/1 時点のものなので、たぶんすぐ古くなります。

環境

npm -v
4.0.2
ng --version
angular-cli: 1.0.0-beta.24
node: 7.2.0
os: darwin x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.2
@angular/http: 2.4.2
@angular/platform-browser: 2.4.2
@angular/platform-browser-dynamic: 2.4.2
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.2

ng new から

myappを作成し、ディレクトリに入ります。

ng new myapp
cd myapp

angularfire2およびfirebaseをインストールします。このとき、2.0.0-beta.7.1-pre以上じゃないと AoT コンパイル時の問題があるためビルドできません。

npm i -S angularfire2@2.0.0-beta.7.1-pre firebase

最後にapp.module.tsに設定を書き加えます。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AuthProviders, AuthMethods, AngularFireModule } from 'angularfire2';

export const FIREBASE_COMFIG = {
  apiKey: "apiKey",
  authDomain: "authDomain",
  databaseURL: "databaseURL",
  storageBucket: "storageBucket",
  messagingSenderId: "messagingSenderId"
};

export const AUTH_CONFIG = {
  provider: AuthProviders.Twitter,
  method: AuthMethods.Redirect
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularFireModule.initializeApp(FIREBASE_COMFIG, AUTH_CONFIG),
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

各種 CONFIG オブジェクトには、AoT コンパイル時にexportを付ける必要があります。

ng build --aot

これでコンパイルが通りました。それにしてもangular-cliもangularfire2も beta な現状…、たぶんこの記事もすぐに古くなります。