npm配置

Question

我已经为项目多次安装和使用过AngularFire2，但自从v5发布以来，我无法正确设置它。

这是我为解决问题而采取的步骤。

"angularfire2": "^5.0.0-rc.3",
"firebase": "^4.5.2",

的package.json

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
...
@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseCredentials),
    AngularFireDatabaseModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
   ....

将Firebase凭据添加到app.module.ts +导入默认模块和数据库模块。这是最重要的部分

$ ionic serve

当我执行var obj = $("#GetDocsActiveX");时，我收到错误消息＆＃34;找不到模块＆＃34; @ firebase / database＆＃34;在webpackMissingModule（http://localhost:8100/build/vendor.js:119190:82）

检查node_modules文件夹时，@ firebase没有数据库子文件夹，但firebase-folder确实有一个数据库文件夹。

我做错了什么或者它是AngularFire2的一般问题？

Answer 1

我认为这与npm的问题有关。当使用纱线安装模块时，一切都完美无瑕。

yarn add angularfire2 firebase

tldr：节点：8.4.0 / npm：5.2.0有问题，纱线工作

Answer 2

您可以尝试：

$ rm -rf node_modules/
$ npm install
$ npm install angularfire2@latest --save

或按AngularFireDatabaseModule更改AngularFireDatabase。

Answer 3

我没有运气试图重现你的问题。我建议如果这仍然是你尝试以下问题的一个问题：

检查我的配置与您的配置之间的差异
查看有关配置ionic3 here
重新安装npm（听起来很疯狂，但偶尔我这样做，问题消失了，我看到我的比你的更新）

npm配置

$npm ls -g --depth=0
/Users/pbrack/.nvm/versions/node/v8.5.0/lib
├── cordova@7.1.0
├── cordova-check-plugins@3.0.1
├── ionic@3.13.2
├── ios-deploy@1.9.2
└── npm@5.4.2

配置步骤

$ ionic start angularfire2test blank
$ npm install angularfire2 firebase --save

的package.json

{
  "name": "angularfire-test",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@ionic-native/core": "4.3.0",
    "@ionic-native/splash-screen": "4.3.0",
    "@ionic-native/status-bar": "4.3.0",
    "@ionic/storage": "2.0.1",
    "angularfire2": "^5.0.0-rc.3",
    "firebase": "^4.6.0",
    "ionic-angular": "3.7.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.0",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project"
}

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {ErrorHandler, NgModule} from '@angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import {SplashScreen} from '@ionic-native/splash-screen';
import {StatusBar} from '@ionic-native/status-bar';

import {MyApp} from './app.component';
import {HomePage} from '../pages/home/home';


import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule, AngularFireDatabase} from 'angularfire2/database';
import {AngularFireAuthModule} from 'angularfire2/auth';


export const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: '<your-messaging-sender-id>'
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AngularFireDatabase,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {
}

home.ts

import {Component} from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  items: Observable<any[]>;

  constructor(afDB: AngularFireDatabase) {
    this.items = afDB.list('cuisines').valueChanges();
  }

}

Answer 4

1.Inside package.json，从“firebase”中删除^：“^ 4.8.1”

1.1将Firebase从4.8.1下调至4.8.0，将4.8.1更改为4.8.0

1.2最终结果应如下所示：“firebase”：“4.8.0”

在项目根目录中运行npm update。 NPM将降级Firebase雅虎
运行serve --open以检查编译错误。应该没有。原因是：

Firebase引入了一些AngularFire2尚未应对的突破性变化。在AngularFire2团队解决之前，这将是解决方案。

添加竖起大拇指的表情符号，并指导任何有同样问题的人！会节省很多时间！

Answer 5

安装最新的angularfire2和firebase@4.8.2

npm install firebase@4.8.2
npm install angularfire2@latest

不再需要“--save”，它仍然是隐含的

Answer 6

首先，您将npm install firebase @ angular / fire

然后npm安装angularfire2 @ latest

Answer 7

以下代码对我有用

<块引用>

npm install --save firebase @angular/fire -f

AngularFire2 - 找不到模块@ firebase / database

7 个答案:

npm配置

配置步骤

的package.json

app.module.ts

home.ts