Importing AngularFireAuthModule and FirebaseUI-Angular module only in feature module

[kartikwatwani]

I want to import AngularFireAuthModule,firebase/auth,firebaseui module only in feature module(login module) and not in AppModule because the 'firebase/auth' module takes around 160 kb in main production bundle size which increases the initial load time. Is there a way I can do this and also be able to use this library ? because right now when I am trying to do it I am getting an error shown below;

 StaticInjectorError(AppModule)[FirebaseuiAngularLibraryComponent -> AngularFireAuth]: 
  StaticInjectorError(Platform: core)[FirebaseuiAngularLibraryComponent -> AngularFireAuth]: 
    NullInjectorError: No provider for AngularFireAuth!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveNgModuleDep (core.js:21218)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21907)
    at injectInjectorOnly (core.js:1774)

[RaphaelJenni]

Hi
You should be able to import the module with forRoot in the feature module without any problems.
Please give it a try and tell me if you encounter any errors.

[kartikwatwani]

Hi,I created this issue after trying with forRoot in feature module but still this error occures. My login.module.ts is shown below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';
import { AuthService } from './services/auth.service';
import {FirebaseUIModule, firebase, firebaseui} from 'firebaseui-angular';
import {AngularFireAuthModule} from '@angular/fire/auth';
const firebaseUiAuthConfig: firebaseui.auth.Config = {
  signInFlow: 'popup',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    {
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        'auth_type': 'reauthenticate'
      },
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,

    firebase.auth.PhoneAuthProvider.PROVIDER_ID
   
  ],
  tosUrl: 'www.someurl.com/tc',
  privacyPolicyUrl: 'www.someurl.com/pp',
  credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
};
@NgModule({
  declarations: [LoginComponent],
  providers:[AuthService],
  imports: [
    CommonModule,
    LoginRoutingModule,
    AngularFireAuthModule,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig),
  ]
})
export class LoginModule { }

and my AppModule looks like below shown code:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppRoutingModule } from "./app-routing.module";
import { GlobalManagerService } from "./services/global-manager.service";
import { environment } from "../environments/environment";
import { AngularFireModule } from "@angular/fire";
import {
  FunctionsRegionToken,
  AngularFireFunctionsModule
} from "@angular/fire/functions";


@NgModule({
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireFunctionsModule
  ],
  entryComponents: [AppComponent],

  declarations: [
    AppComponent
  ],
  providers:[
    { provide: FunctionsRegionToken, useValue: "us-central1" },
    GlobalManagerService
  ],

  bootstrap: [AppComponent]
})
export class AppModule {}

Can you see some catch here ? or something else I need to do to it get things done ?

[RaphaelJenni]

@itsmeneartou I tested it and was able to reproduce the error.
It's a bug caused by the service was providedIn root. I worked out a fix, please test it out with npm install firebaseui-angular@3.4.2-beta.0 and give me some feedback, so I can release the bugfix.

[kartikwatwani]

I checked it out and it is working as I wanted it to work. Thank you so much :)

[RaphaelJenni]

Perfect, I will release the bugfix later today.

[RaphaelJenni]

New version (v3.4.2) is released