AngularFire2導入で詰まった話

4646 ワード
Angular Firebase AngularFire2 Angular テキストリンク

背景

udemy の動画で学習中に、 Angular Fire 2のインストールでエラーが出まくったので、その対処について記録しておく。

実際に行ったこと

udemy 動画に従って、 angularfire2 と firebase をインストール。

$ npm install angularfire2 firebase --save

ここで ng serve を立ち上げ直したが、エラーが出まくった。

// (一部抜粋)
Error: src/app/app.module.ts:49:5 - error TS2304: Cannot find name 'AngularFireModule'.

49     AngularFireModule.initializeApp(environment.firebase),
       ~~~~~~~~~~~~~~~~~


Error: src/app/app.module.ts:50:5 - error TS2304: Cannot find name 'AngularFirestoreModule'.

50     AngularFirestoreModule,
       ~~~~~~~~~~~~~~~~~~~~~~

動画のリンクを辿ると、エラー対処法について書いてあったので、それらを試してみる。

$ npm i firebase
$ ng add @angular/fire
$ npm audit fix
$ npm i @angular/fire
$ npm i [email protected]

上記コマンドを打ち込んだが、エラーは変わらず。むしろ増えている気がする・・・。

気を取り直して、一度全部アンインストールする。

$ npm uninstall [email protected]
$ npm uninstall @angular/fire
$ npm uninstall firebase

// ng add で入れたコンポーネントは手動で消すしかないようなので、省略

$ npm uninstall angularfire2 firebase

動画の中で参照していた GitHub(下記)を見てみると、使うコマンドが違うっぽいので、GitHub の手順に従ってみる。
https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

$ ng add @angular/fire
ℹ Using package manager: npm
✔ Found compatible package version: @angular/[email protected].
✔ Package information loaded.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
    ⚠️ The @angular-devkit/architect devDependency specified in your package.json (<0.900 || ^0.900.0-0 || ^9.0.0-0) does not fulfill AngularFire's dependency (^0.1200.0)
    ⚠️ The firebase-tools devDependency specified in your package.json (^7.12.0) does not fulfill AngularFire's dependency (^9.0.0)
UPDATE package.json (1577 bytes)
✔ Packages installed successfully.
⠋ Preparing the list of your Firebase projects(node:21618) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
✔ Preparing the list of your Firebase projects
? Please select a project: ng-fitness-tracker (ng-fitness-tracker-b57fc)
CREATE firebase.json (669 bytes)
CREATE .firebaserc (165 bytes)
UPDATE angular.json (3307 bytes)

いくつか warning が出てきたので対処してみる。

  • ⚠️ The @angular-devkit/architect devDependency specified in your package.json (<0.900 || ^0.900.0-0 || ^9.0.0-0) does not fulfill AngularFire's dependency (^0.1200.0)
  • ⚠️ The firebase-tools devDependency specified in your package.json (^7.12.0) does not fulfill AngularFire's dependency (^9.0.0)
  • (node:21618) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency (Use node --trace-warnings ... to show where the warning was created)
// architect を 0.1200.0 で入れてみる
$ npm install @angular-devkit/[email protected]

// firebase-tools を 9.0.0 で入れてみる
$ npm install [email protected]

// 依存性の確認
$ node --trace-warnings ...
internal/modules/cjs/loader.js:905
  throw err;
  ^

Error: Cannot find module '/Users/glaciermelt/workspace/udemy/fitness-tracker/...'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

// 何か吐き出されたが、よくわからん・・・。

以上の対応で、下記のモジュールをインポートしても、特にエラーは出なくなった。

    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,

依存性の確認のところはよくわかっていないが、触ったことのないファイルなので、ひとまず据え置き。