Ionic 将Firebase集成到独立组件中

3zwjbxry  于 2023-04-03  发布在  Ionic
关注(0)|答案(2)|浏览(134)

我有一个项目,这是一个社会应用程序与离子角,我想包括在它的Firebase进口

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore())

问题是这些导入应该在app.module.ts文件中,而当前组件是一个独立组件。我不知道在哪里放置导入,因为我应该导入:

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

ut6juiuv1#

也许你需要像这样在应用程序引导上提供你的firebase应用程序:

bootstrapApplication(YourComponent, {
  providers: [
    importProvidersFrom(
      provideFirebaseApp(() => initializeApp(environment.firebase))
    ),
    importProvidersFrom(
      provideFirestore(() => getFirestore())
    )
  ]
});
yyyllmsg

yyyllmsg2#

我需要清理它,但我正在使用:

import { InjectionToken, NgModule } from '@angular/core';

import {
  FirebaseApp,
  initializeApp,
  provideFirebaseApp,
} from '@angular/fire/app';
import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
import {
  provideFirestore,
  getFirestore,
  connectFirestoreEmulator,
  initializeFirestore,
} from '@angular/fire/firestore';

export interface IFirebaseConfig {
  apiKey: string;
  authDomain: string;
  projectId: string;
  locationId: string;
  storageBucket: string;
  messagingSenderId: string;
  appId: string;
  measurementId: string;
}

export const FIREBASE_CONFIG = new InjectionToken<IFirebaseConfig>(
  'FIREBASE_CONFIG',
  {
    providedIn: 'any',
    factory: () => {
      throw new Error(`Provide FIREBASE_CONFIG`);
    },
  }
);
export const USE_EMULATORS = new InjectionToken<boolean>('USE_EMULATORS', {
  providedIn: 'any',
  factory: () => {
    throw new Error(`Provide USE_EMULATORS`);
  },
});

@NgModule({
  declarations: [],
  imports: [
    provideFirebaseApp((injector) => {
      const config = injector.get(FIREBASE_CONFIG);
      console.log('🔔 provideFirebaseApp');
      return initializeApp(config);
    }),
    provideAuth((injector) => {
      console.log('🔔 provideAuth');
      const app = injector.get(FirebaseApp);
      const auth = getAuth(app);
      if (injector.get(USE_EMULATORS)) {
        console.log('🔔 using auth emulator...');
        connectAuthEmulator(auth, 'http://localhost:9099');
      }
      return auth;
    }),
    provideFirestore((injector) => {
      console.log('🔔 provideFirestore');
      let firestore;
      if (injector.get(USE_EMULATORS)) {
        console.log(
          `🔔 using firestore emulator...${
            injector.get(FIREBASE_CONFIG).projectId
          }`
        );
        // bug: experimentalAutoDetectLongPolling not picked up via `getFirestore`
        const app = injector.get(FirebaseApp);
        firestore = initializeFirestore(app, {
          experimentalAutoDetectLongPolling: true,
        });
        connectFirestoreEmulator(firestore, 'localhost', 8080);
      } else {
        firestore = getFirestore();
      }
      return firestore;
    }),
  ],
})
export class FirebaseV7Module {}

然后在bootstrapApplication的提供程序中包含以下内容,如 provideFirebase()

importProvidersFrom(
 FirebaseV7Module
)

请注意,您也可以将提供程序添加到路由器,因此并非所有内容都必须转到根提供程序,但在这种情况下,这是有意义的。

在新的独立世界中,应用程序不是基于模块进行引导,而是基于main.ts中的组件进行引导:

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { environment } from './environments/environment';

if (environment.production) {
    enableProdMode();
}

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

appConfig与源代码中的app组件搭配:
src/app/app.config.ts来自RealWorld Example App的示例:

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: ApiConfiguration, useValue: { rootUrl: environment.apiUrl } },
    provideRouter(
      [
        {
          path: '',
          loadComponent: () => import('./layout/layout.component'),
          loadChildren: () => import('./layout/layout.routes'),
        },
      ],
      withHashLocation()
    ),
    provideHttpClient(withInterceptors([authInterceptor()])),
 ],
};

相关问题