title: How to fix: "@angular/fire"' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular
body: <p>I'm trying to connect my app with a firebase db, but I receive 4 error messages on app.module.ts:</p>
  <pre><code>'&quot;@angular/fire&quot;' has no exported member 'AngularFireModule'.ts(2305),
  '&quot;@angular/fire/storage&quot;' has no exported member 'AngularFireStorageModule'.ts(2305)
  '&quot;@angular/fire/database&quot;' has no exported member 'AngularFireDatabaseModule'.ts(2305)
  '&quot;@angular/fire/auth&quot;' has no exported member 'AngularFireAuthModule'.ts(2305)
  </code></pre>
  <p>here is my package.json file:</p>
  <pre><code>{
    &quot;name&quot;: &quot;gescable&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;author&quot;: &quot;Ionic Framework&quot;,
    &quot;homepage&quot;: &quot;https://ionicframework.com/&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build&quot;,
      &quot;test&quot;: &quot;ng test&quot;,
      &quot;lint&quot;: &quot;ng lint&quot;,
      &quot;e2e&quot;: &quot;ng e2e&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular-devkit/architect&quot;: &quot;^0.1202.5&quot;,
      &quot;@angular-devkit/architect-cli&quot;: &quot;^0.1202.5&quot;,
      &quot;@angular/common&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/core&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/fire&quot;: &quot;^7.0.4&quot;,
      &quot;@angular/forms&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/router&quot;: &quot;~12.1.1&quot;,
      &quot;@ionic/angular&quot;: &quot;^5.5.2&quot;,
      &quot;ajv&quot;: &quot;^8.6.2&quot;,
      &quot;angularfire2&quot;: &quot;^5.4.2&quot;,
      &quot;firebase&quot;: &quot;^7.24.0&quot;,
      &quot;rxfire&quot;: &quot;^6.0.0&quot;,
      &quot;rxjs&quot;: &quot;~6.6.0&quot;,
      &quot;tslib&quot;: &quot;^2.2.0&quot;,
      &quot;zone.js&quot;: &quot;~0.11.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~12.1.1&quot;,
      &quot;@angular-eslint/builder&quot;: &quot;~12.0.0&quot;,
      &quot;@angular-eslint/eslint-plugin&quot;: &quot;~12.0.0&quot;,
      &quot;@angular-eslint/eslint-plugin-template&quot;: &quot;~12.0.0&quot;,
      &quot;@angular-eslint/template-parser&quot;: &quot;~12.0.0&quot;,
      &quot;@angular/cli&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/compiler&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/language-service&quot;: &quot;~12.0.1&quot;,
      &quot;@ionic/angular-toolkit&quot;: &quot;^4.0.0&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.6.0&quot;,
      &quot;@types/jasminewd2&quot;: &quot;~2.0.3&quot;,
      &quot;@types/node&quot;: &quot;^12.11.1&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;4.16.1&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;4.16.1&quot;,
      &quot;eslint&quot;: &quot;^7.6.0&quot;,
      &quot;eslint-plugin-import&quot;: &quot;2.22.1&quot;,
      &quot;eslint-plugin-jsdoc&quot;: &quot;30.7.6&quot;,
      &quot;eslint-plugin-prefer-arrow&quot;: &quot;1.2.2&quot;,
      &quot;jasmine-core&quot;: &quot;~3.8.0&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~5.0.0&quot;,
      &quot;karma&quot;: &quot;~6.3.2&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
      &quot;karma-coverage&quot;: &quot;~2.0.3&quot;,
      &quot;karma-coverage-istanbul-reporter&quot;: &quot;~3.0.2&quot;,
      &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.0&quot;,
      &quot;protractor&quot;: &quot;~7.0.0&quot;,
      &quot;ts-node&quot;: &quot;~8.3.0&quot;,
      &quot;typescript&quot;: &quot;~4.2.4&quot;,
      &quot;@angular-devkit/architect&quot;: &quot;^0.1200.0&quot;,
      &quot;firebase-tools&quot;: &quot;^9.0.0&quot;,
      &quot;fuzzy&quot;: &quot;^0.1.3&quot;,
      &quot;inquirer&quot;: &quot;^6.2.2&quot;,
      &quot;inquirer-autocomplete-prompt&quot;: &quot;^1.0.1&quot;,
      &quot;open&quot;: &quot;^7.0.3&quot;,
      &quot;jsonc-parser&quot;: &quot;^3.0.0&quot;
    },
    &quot;description&quot;: &quot;An Ionic project&quot;
  }
  </code></pre>
  <p>And here is my app.module.ts:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouteReuseStrategy } from '@angular/router';
  import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { ClientPageModule } from './client/client.module';
  import { environment } from '../environments/environment';
  import { AngularFireModule } from '@angular/fire';
  import { AngularFireAuthModule } from '@angular/fire/auth';
  import { AngularFireStorageModule } from '@angular/fire/storage';
  import { AngularFireDatabaseModule } from '@angular/fire/database';
  
  @NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
      BrowserModule,
      IonicModule.forRoot(),
      AppRoutingModule,
      ClientPageModule,
      AngularFireModule.initializeApp(environment.firebaseConfig),
      AngularFireAuthModule,
      AngularFireStorageModule,
      AngularFireDatabaseModule
    ],
    providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
    bootstrap: [AppComponent],
  })
  export class AppModule {}
  </code></pre>
  <p>Here is my tsonfig.ts file</p>
  <pre><code>  &quot;compileOnSave&quot;: false,
    &quot;compilerOptions&quot;: {
      &quot;baseUrl&quot;: &quot;./&quot;,
      &quot;outDir&quot;: &quot;./dist/out-tsc&quot;,
      &quot;sourceMap&quot;: true,
      &quot;declaration&quot;: false,
      &quot;downlevelIteration&quot;: true,
      &quot;experimentalDecorators&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;importHelpers&quot;: true,
      &quot;target&quot;: &quot;es2015&quot;,
      &quot;module&quot;: &quot;es2020&quot;,
      &quot;lib&quot;: [&quot;es2018&quot;, &quot;dom&quot;]
    },
    &quot;angularCompilerOptions&quot;: {
      &quot;enableI18nLegacyMessageIdFormat&quot;: false,
      &quot;strictInjectionParameters&quot;: true,
      &quot;strictInputAccessModifiers&quot;: true,
      &quot;strictTemplates&quot;: true,
      &quot;skipLibCheck&quot;: true 
    }
  }
  </code></pre>