title: How to use Firebase 9 in latest Angular
body: <p>I am looking for a source on how to initialize firebase 9 in a brand new angular app.  I've followed the <a href="https://firebase.google.com/docs/web/setup?authuser=0&amp;sdk_version=v9#add-sdks-initialize" rel="nofollow noreferrer">beta firebase instructions</a>, but when it comes to the <code>initializeApp</code> step, I don't know how to include this into my app.module.ts.</p>
  <p>Normally, you would <code>npm install @angular/fire</code> but when installing, I get an error that basically shows <code>@angular/fire</code> requires firebase 7-8.  9 is already installed, so it won't install angular fire.</p>
  <p>I'm unsure what to import from the <code>@firebase</code> package which will allow me to <code>initializeApp</code> with my environment details.</p>
  <p>Any help would be great, thank you!</p>
  <p>EDIT: Package.json</p>
  <pre><code>{
  &quot;name&quot;: &quot;PROmpt&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/common&quot;: &quot;~11.2.0&quot;,
    &quot;@angular/core&quot;: &quot;~11.2.0&quot;,
    &quot;@angular/forms&quot;: &quot;~11.2.0&quot;,
    &quot;@angular/platform-browser&quot;: &quot;~11.2.0&quot;,
    &quot;@angular/platform-browser-dynamic&quot;: &quot;~11.2.0&quot;,
    &quot;@angular/router&quot;: &quot;~11.2.0&quot;,
    &quot;@capacitor/core&quot;: &quot;2.4.7&quot;,
    &quot;@ionic/angular&quot;: &quot;^5.5.2&quot;,
    &quot;firebase&quot;: &quot;^9.0.0-beta.1&quot;,
    &quot;rxjs&quot;: &quot;~6.6.0&quot;,
    &quot;tslib&quot;: &quot;^2.0.0&quot;,
    &quot;zone.js&quot;: &quot;~0.10.2&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@angular-devkit/build-angular&quot;: &quot;~0.1102.4&quot;,
    &quot;@angular-eslint/builder&quot;: &quot;2.0.2&quot;,
    &quot;@angular-eslint/eslint-plugin&quot;: &quot;2.0.2&quot;,
    &quot;@angular-eslint/eslint-plugin-template&quot;: &quot;2.0.2&quot;,
    &quot;@angular-eslint/template-parser&quot;: &quot;2.0.2&quot;,
    &quot;@angular/cli&quot;: &quot;~11.2.4&quot;,
    &quot;@angular/compiler&quot;: &quot;~11.2.0&quot;,
    &quot;@angular/compiler-cli&quot;: &quot;~11.2.0&quot;,
    &quot;@angular/language-service&quot;: &quot;~11.2.0&quot;,
    &quot;@capacitor/cli&quot;: &quot;2.4.7&quot;,
    &quot;@ionic/angular-toolkit&quot;: &quot;^3.1.1&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.6.0&quot;,
    &quot;jasmine-spec-reporter&quot;: &quot;~5.0.0&quot;,
    &quot;karma&quot;: &quot;~5.2.0&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.0.2&quot;
  },
  &quot;description&quot;: &quot;An Ionic project&quot;
  }
  </code></pre>