0

我有一个使用 AngularFireMessagingModule 推送通知的 Angular 应用程序。

使用我当前的配置，我在我的 AppBrowser 模块的导入数组中添加了这个：

AngularFireModule.initializeApp({
  apiKey: "myAPIKey",
  projectId: "myProjectId",
  messagingSenderId: "myMessagingSenderId
  appId: "mhyAppId"
}),
AngularFireMessagingModule

因此，firebase 模块被添加到主包中。

由于使用 Angular 9 IVY，我们可以延迟加载组件，我想延迟加载实际使用 AngularFireMessagingModule 的通知组件。

我正在关注这篇文章https://medium.com/angular-in-depth/lazy-load-components-in-angular-596357ab05d8来实现这一点。

我已经从我的 AppBrowserModule 中删除了上述模块导入，并使用以下代码创建了一个新文件：

import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { ChangeDetectorRef, Component, NgModule, ViewContainerRef } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireMessaging, AngularFireMessagingModule } from '@angular/fire/messaging';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { StorageMap } from '@ngx-pwa/local-storage';
import { AuthService } from '../shared/services/auth.service';
import { GlobalService } from '../shared/services/global.service';
import { MediaService } from '../shared/services/media.service';

@Component({
  selector: 'enable-notifcations',
  templateUrl: './enable-notifications.component.html'
})
export class EnableNotificationsComponent {

  constructor(public viewContainerRef: ViewContainerRef,
    public dialog: MatDialog,
    private authService: AuthService,
    public _gs: GlobalService,
    public media: MediaService,
    private cdr: ChangeDetectorRef,

    private http: HttpClient,
    private messaging: AngularFireMessaging,
    private storage: StorageMap
  ) {
  }

  ngOnDestroy() {

  }
}

@NgModule({
  imports: [
    CommonModule,
    MatButtonModule,
    MatDialogModule,
    AngularFireModule.initializeApp({
      apiKey: "myAPIKey",
      projectId: "myProjectId",
      messagingSenderId: "myMessagingSenderId
      appId: "mhyAppId"
    }),
    AngularFireMessagingModule
    AngularFireMessagingModule
  ],
  declarations: [
    EnableNotificationsComponent
  ]
})
class EnableNotificationsModule { }

在我的应用程序组件中，我有条件地延迟加载该组件。

const { EnableNotificationsComponent } = await import(/* webpackPrefetch: true */'./account/enable-notifications.component');
const enableNotificationsComponentFactory = this.cfr.resolveComponentFactory(EnableNotificationsComponent);
this.enableNotificationsComponentInstance = this.enableNotificationsContainer.createComponent(enableNotificationsComponentFactory, null, this.injector);
this.enableNotificationsComponentInstance.instance.initNotifications();

这种方法适用于我的其他延迟加载组件，但在这种情况下，它会抛出以下错误：

Unhandled Promise rejection: R3InjectorError(AppBrowserModule)[InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options! ; Zone: <root> ; Task: Promise.then ; Value: NullInjectorError: R3InjectorError(AppBrowserModule)[InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!

谁能指导如何解决这个问题？

4

0 回答 0