angularfire2を動かす 2017/1

gistfile1.txt

2017/01/11 にQiitaに投稿した記事のアーカイブです
  
---

@armorik83です。[angularfire2](https://github.com/angular/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`に設定を書き加えます。

```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な現状…、たぶんこの記事もすぐに古くなります。