Property 'auth' does not exist on type 'AngularFireModule'

2
votes

Im Using Angular 4 and Firebase to authentication. I'm getting the error " Property 'auth' does not exist on type 'AngularFireModule'."

The Code is as follows

import { AngularFireModule} from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';


@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css'],
 animations: [moveIn()],
 host: {'[@moveIn]': ''}
})

export class LoginComponent implements OnInit {
error: any;
constructor(public af: AngularFireModule,private router: Router) {
  this.af.auth.subscribe(auth => { 
  if(auth) {
    this.router.navigateByUrl('/members');
  }
});

loginFb() {
this.af.auth.login({
  provider: AuthProviders.Facebook,
  method: AuthMethods.Popup,
}).then(
    (success) => {
    this.router.navigate(['/members']);
  }).catch(
    (err) => {
    this.error = err;
  })
  }
   }

The version information : "@angular/router": "^4.0.0",

"angularfire2": "^4.0.0-rc.1",

"core-js": "^2.4.1",

"firebase": "^4.1.3",

"rxjs": "^5.1.0",

"zone.js": "^0.8.4"

UPDATE:

This worked

constructor(public af: AngularFireAuth,private router: Router) {
      this.af.authState.subscribe(auth => { 
      if(auth) {
        this.router.navigateByUrl('/members');
      }
2
angularfirebasefirebase-authenticationangularfire

2 Answers

2
votes

For AngularFireAuth, you should import AngularFireAuthModule at your rootmodule

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

@NgModule({
  imports: [
    ...
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule,        // <------ mention here
  ]
})
export class AppModule { }

then inject AngularFireAuth at your component

import { AngularFireAuth } from 'angularfire2/auth';

constructor(private auth: AngularFireAuth, ...

use it like below:

this.auth.auth()
0
votes

The database and auth are now separated modules, AngularFireAuth and AngularFireDatabase

So in your constructor, you should do this 

 constructor(private router: Router, public af: AngularFireAuth
  ) { ...    }

Another is if you are just using the FireAuthModule, you can remove the 2 other imports ( AngularFireModule and AngularFireDatabaseModule )