我在導入AngularFire2時遇到了一些問題

2 年 ago

科, 颖

2 minutes

背景 –

在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 firebase@7.24.0

我输入了上述命令，但错误仍未改变。反而感觉错误增加了…

重新调整心态，彻底卸载一次。

$ npm uninstall firebase@7.24.0
$ 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/fire@7.0.4.
✔ Package information loaded.

The package @angular/fire@7.0.4 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)

因为出现了一些警告，所以试着解决一下。

(Use node –trace-warnings … to show where the warning was created)

// architect を 0.1200.0 で入れてみる
$ npm install @angular-devkit/architect@0.1200.0

// firebase-tools を 9.0.0 で入れてみる
$ npm install firebase-tools@9.0.0

// 依存性の確認
$ 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,

我对依存性的确认还不太清楚，但这个文件我从未接触过，所以暂且保持原样。

背景 –

只需要一种选择，以下是对该句的汉语本地化释义： 实际亲身经历

只需要一种选择，以下是对该句的汉语本地化释义：
实际亲身经历