Error in authentication with firebase and angular 7

I'm doing a login with angle 7 and firebase, I'm using angular / angularfire2. I do the form, I configure everything, I make the necessary imports. All the elements display without any problem in the browser (I still did not give functionality to the button to start session), until I put a variable in the constructor:

constructor(public afAuth: AngularFireAuth) {} 

From this nothing is displayed in the browser and the console sends me this error:

in firefox:

ERROR Error: "[object Object]"

in Chrome:

vendor.js:47983 ERROR Error: Uncaught (in promise): Error: 
StaticInjectorError(AppModule)[LoginComponent -> AngularFireAuth]: 
StaticInjectorError(Platform: core)[LoginComponent -> AngularFireAuth]: 
NullInjectorError: No provider for AngularFireAuth!
Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireAuth]: 
       StaticInjectorError(Platform: core)[LoginComponent -> AngularFireAuth]: 
NullInjectorError: No provider for AngularFireAuth!

I leave some files in case they are necessary.

environment.ts:

export const environment = {
  production: false,
  config : {
    apiKey: "AIlpSyC5FYtKiisQApqldxL_-8Vjtk0_01llALU",
    authDomain: "axxxxxx.firebaseapp.com",
    databaseURL: "https://axxxxxx.firebaseio.com",
    projectId: "axxxxxx",
    storageBucket: "axxxxxxx.appspot.com",
    messagingSenderId: "123456789101"
  }

};

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { environment } from "../environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFireDatabaseModule } from "@angular/fire/database";

import {RouterModule, Routes} from '@angular/router';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { PrincipalComponent } from './principal/principal.component';
import { FormsModule } from '@angular/forms';

export const rutas: Routes = [
  { path: '',          component: PrincipalComponent},
  { path: 'login',          component: LoginComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    PrincipalComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(rutas),
    AngularFireModule.initializeApp(environment.config),
    AngularFireDatabaseModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

login.component.ts:

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

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

export class LoginComponent implements OnInit {
  email = '';
  pass = '';

  constructor(public afAuth: AngularFireAuth) {}

  loginGoogle() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.afAuth.auth.signOut();
  }

  ngOnInit() {}

}

Only when I put that variable in the constructor does the problem appear. Thanks to everyone in advance.