Question

我有一个Angular应用程序，该应用程序使用AngularFireMessagingModule进行推送通知。

在当前配置下，我已将此添加到AppBrowser模块的imports数组中：

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!

任何人都可以指导如何解决此问题吗？

带有AngularFireMessagingModule R3InjectorError（AppBrowserModule）[InjectionToken angularfire2.app.options的Angular 9 IVY延迟加载组件

0 个答案: