Using Firebase Analytics 9 with Angular Universal

Issue

In my Angular Module, I have this:

@NgModule({
  declarations: [],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth()),
    provideStorage(() => getStorage()),
    //provideAnalytics(() => getAnalytics())
  ]
})

As soon as I uncomment the Firebase Analytics provider and run:

npm run dev:ssr

I get this error:

ReferenceError: navigator is not defined
    at Object.areCookiesEnabled (C:\web projects\fireblog.io\node_modules\@firebase\util\dist\index.node.cjs.js:713:5)
    at C:\web projects\fireblog.io\node_modules\@firebase\analytics\dist\index.cjs.js:1161:31
    at step (C:\web projects\fireblog.io\node_modules\tslib\tslib.js:143:27)
    at Object.next (C:\web projects\fireblog.io\node_modules\tslib\tslib.js:124:57)
    at C:\web projects\fireblog.io\node_modules\tslib\tslib.js:117:75
    at new ZoneAwarePromise (C:\web projects\fireblog.io\dist\fireblog\server\main.js:226656:23)
    at Object.__awaiter (C:\web projects\fireblog.io\node_modules\tslib\tslib.js:113:16)
    at isSupported (C:\web projects\fireblog.io\node_modules\@firebase\analytics\dist\index.cjs.js:1153:18)
    at Array.useValue (C:\web projects\fireblog.io\dist\fireblog\server\main.js:94787:84)
    at ApplicationInitStatus.runInitializers (C:\web projects\fireblog.io\dist\fireblog\server\main.js:89404:52)

I thought about using the platformId variable to detect node or not, but I can't use that in an import.

I am also not sure if Firebase knows this is a bug.

Any suggestions?

Thanks,

J

Solution

I figured it out by using dynamic imports:

export class AppModule {

  constructor(@Inject(PLATFORM_ID) platformId: Object) {

    if(isPlatformBrowser(platformId)) {
      import('@angular/fire/analytics').then(a => {
        a.provideAnalytics(() => a.getAnalytics())
      });
    }
  }
}

Answered By - Jonathan