Question

我是Ionic2的新手，并且是第一次使用firebase。在尝试使用上述两个示例登录应用程序时，我收到了编译错误

TypeScript错误：

TypeScript错误： /ionic/devdactic-firebase22/node_modules/angularfire2/database/database.d.ts(9,29）：错误TS2503：找不到命名空间＆＃39; firebase＆＃39;。 TypeScript错误： /ionic/devdactic-firebase22/node_modules/angularfire2/database/database.d.ts(10,31）：错误TS2503：找不到命名空间＆＃39; firebase＆＃39;。 TypeScript错误： /ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(15,40）：错误TS2503：找不到命名空间＆＃39; firebase＆＃39;。 TypeScript错误： /ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts(16,52）：错误TS2503：找不到命名空间＆＃39; firebase＆＃39;。打字稿错误：/ionic/devdactic-firebase22/node_modules/angularfire2/providers/auth.d.ts（16,92）：错误TS2503：无法找到命名空间＆＃39; firebase＆＃39;。

我尝试过使用AngularFire的安装指南：https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md。

还尝试在我的app.ts中导入firebase

从＆＃39; firebase＆＃39;;
导入*作为firebase

仍然无法找到任何解决方案。可能是什么原因以及如何解决？

我正在使用angularfire2@^2.0.0-beta.2 和firebase@^2.4.2。

app.ts

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {LoginPage} from './pages/login/login';
import * as firebase from 'firebase';

import {FIREBASE_PROVIDERS,
  defaultFirebase,
  AngularFire,
  AuthMethods,
  AuthProviders,
  firebaseAuthConfig} from 'angularfire2';


@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [
        FIREBASE_PROVIDERS,
        // defaultFirebase('https://loginapp-a08a6.firebaseio.com/'),
        firebaseAuthConfig({
           provider: AuthProviders.Password,
           method: AuthMethods.Password
       })
    ]
})
export class MyApp {
  rootPage: any = LoginPage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
     var config = { 
       apiKey: "AIzaSyBU2Vqq7AjN4rlMWjyKBbXo2RVJXAR4TeM",
        authDomain: "loginapp-a08a6.firebaseapp.com",
        databaseURL: "https://loginapp-a08a6.firebaseio.com",
        storageBucket: "loginapp-a08a6.appspot.com",
      };
      firebase.initializeApp(config); 
  }
}

ionicBootstrap(MyApp);

login.ts：

import {Component} from '@angular/core';
import {NavController, AlertController, LoadingController} from 'ionic-angular';
import {FirebaseAuth} from 'angularfire2';
import {HomePage} from '../home/home';

@Component({
  templateUrl: 'build/pages/login/login.html',
})
export class LoginPage {
  // public loading: Loading;

  constructor(public nav: NavController,
   public auth: FirebaseAuth,
   private alertCtrl:AlertController,
   private loadingCtrl:LoadingController) {}

  public registerUser(credentials) {
    this.showLoading()
    this.auth.createUser(credentials).then((authData) => {
      let prompt = this.alertCtrl.create({
        title: 'Success',
        subTitle: 'Your new Account was created!',
        buttons: ['OK']
      });
      prompt.present();
    }).catch((error) => {
      this.showError(error);
    });
  }

  public login(credentials) {
    this.showLoading()

    this.auth.login(credentials).then((authData) => {
      this.nav.setRoot(HomePage);
    }).catch((error) => {
      this.showError(error);
    });
  }

  showLoading() {
    var loader = this.loadingCtrl.create({
      content: 'Please wait...',
      duration:3000
    });
   loader.present();
  }

  showError(text) {   
    let alert = this.alertCtrl.create({
      title: 'Fail',
      subTitle: text,
      buttons: ['OK']
    });
    alert.present();
  }
}

Answer 1

在 compilerSettings 下的 tsconfig 中，添加属性＆＃34; types＆＃34;并指定＆＃34; firebase＆＃34;作为一种类型：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "types": [
      "firebase"
    ]
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Answer 2

有各种各样的答案可以解决这类问题。对我有用的是：

您可以直接在typings.json中引用angularfire2节点包中包含的Firebase 3 typings文件。运行：

typings install file:node_modules/angularfire2/firebase3.d.ts --save --global
- 这会将引用保存到typings.json
- 注意：需要打字v.1 +
typings install

这会将打字文件放在typings/目录中。

对于其他解决方案，请在GitHub https://github.com/angular/angularfire2/issues/234

上查看此问题

Ionic2 + Firebase app编译错误：TypeScript错误：错误TS2503：找不到命名空间＆＃39; firebase＆＃39;

2 个答案: