将 Angular/Fire 安装到 Angular 17 中

这是因为 Angular 17 没有发布 angular fire。

尝试： npm i @angular/[email protected]

我花了一天左右的时间寻找解决方法，但一无所获。对于未来一两周的旅行者 - 如果您正在寻找一种方法，在使用当前版本的 Angular/Fire （16） 或预发布版本时将 Angular 17 应用部署到 Firebase Hosting，那么它将无法协同工作。

我试过了-

1. 让 Angular Fire 16 与 Angular 17 一起工作 - 不起作用
2. 尝试使用 Angular Fire 17 的预发布版本与 Angular 17 一起使用以部署到托管，但没有奏效。我试过了ng add @angular/fire@next
3. 然后，我尝试更改package.json文件并添加，并冒着遇到运行时错误和冲突的风险，并使用了，但我仍然无法部署到托管。"overrides": { "@angular/fire": { "@angular/common": "16.0.1", "@angular/core": "16.0.1", "@angular/platform-browser": "16.0.1", "@angular/platform-browser-dynamic": "16.0.1" } }npm install --force

Angular/Fire 的下一个稳定版本应该会在接下来的几周内发布，但感恩节期间可能会放慢速度。

此外，在安装和初始化 Angular/Fire 时，一切都在我的 app.config.ts 文件中设置，我过去必须在 NgModule 中自己完成。您仍然需要设置一组单独的环境。文件夹。

这似乎适用于Angular 17中的独立版本。

app.config.ts（应用.config.ts）

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
import { environment } from '../environments/environment.prod';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations(), importProvidersFrom([
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
  ])]
};

bookings.component.ts（预订.component.ts）

import { Component } from '@angular/core';
import { inject } from '@angular/core';
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-bookings',
  standalone: true,
  imports: [],
  templateUrl: './bookings.component.html',
  styleUrl: './bookings.component.scss'
})
export class BookingsComponent {
  item$: Observable<any[]>;
  firestore: Firestore = inject(Firestore);

  constructor() {
    const itemCollection = collection(this.firestore, 'guests');
    this.item$ = collectionData(itemCollection);
  }
}

package.json

    {
  "name": "back",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/cdk": "^17.0.1",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/fire": "^16.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/material": "^17.0.1",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "firebase": "^10.7.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.5",
    "@angular/cli": "^17.0.5",
    "@angular/compiler-cli": "^17.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.2.2"
  }
}