Angular 11.0.5集成AngularFire2遇浏览器报错求助

嘿，我看了你按照官方文档配置Angular+Firebase后遇到的浏览器报错问题——CLI没报错但应用跑不起来，这种情况大概率是依赖版本不兼容或者RxJS语法过时导致的，下面给你一步步排查解决的方案：

一、先搞定依赖包（最常见的问题根源） #

你现在用的angularfire2是旧版包，目前Firebase官方已经把它升级为@angular/fire了，旧包和新版本Angular（比如Angular 8+）兼容性很差，很容易触发运行时错误。

操作步骤： #

1. 先卸载旧的依赖：

npm uninstall angularfire2 firebase --save

2. 安装最新的官方兼容包：

npm install @angular/fire firebase --save

二、更新AppModule的导入配置 #

新版本的@angular/fire导入路径有变化，需要修改app.module.ts的代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WoodComponent } from './wood/wood.component';
// 注意这里的导入路径已经更新
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
    WoodComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase), // 建议把初始化放在Firestore模块前面
    AngularFirestoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

三、修复RxJS的语法问题 #

你的app.component.ts里用的是RxJS 5的导入方式，现在Angular默认搭配RxJS 6+，得调整导入语句：

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
// RxJS 6+ 直接从rxjs根目录导入Observable
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'fire';
  items: Observable<any[]>;

  constructor(db: AngularFirestore) {
    this.items = db.collection('items').valueChanges();
  }
}

四、额外排查小技巧 #

如果上面的修改后还是报错，你可以试试这些：

• 仔细看浏览器控制台的具体错误文本（哪怕没法截图，复制下来也能帮你定位）：
  • 如果是Cannot find module 'rxjs/Observable'：就是RxJS版本问题，按上面的方式改导入就好；
  • 如果是FirebaseError: Missing or insufficient permissions：去Firebase控制台临时修改Firestore安全规则（开发阶段可以放开，上线前一定要改回安全规则）：

    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /{document=**} {
          allow read, write: if true;
        }
      }
    }
    

• 清缓存重装依赖：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  

• 重启Angular开发服务器：关掉当前的ng serve，重新启动一次。

按照这些步骤操作，应该能解决你遇到的问题，如果还有具体的错误信息，随时补充出来我再帮你针对性调整~

内容的提问来源于stack exchange，提问作者Matthew