CODEWITHSUNDEEP
angularfirebase
gaggina
gaggina

Reputation: 5425

What's the right way to use the new firebase with an angular 2 project?

These 2 project are pretty new at this moment. I can't really figure out what's the right way to use firebase (the newer version) with an angular 2 project.

Let's say this is my main index.html of my angular 2 app:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>NewApp</title>
    <base href="/">
    {{#unless environment.production}}
    <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
    {{/unless}}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <new-app-app>Loading...</new-app-app>

    {{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}


    <script>
    System.import('system-config.js').then(function () {
    System.import('main');
    }).catch(console.error.bind(console));
    </script>

  </body>
</html>

Where do I put my configuration string? I mean this one:

<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: "",
  };
  firebase.initializeApp(config);
</script>

And how I can access the firebase object within my angular component? What's the best way of doing it?

Upvotes: 1

Views: 330

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202246

I would use Angularfire2 to use Firebase into an Angular2 application.

This way you will be able to configure it when bootstrapping your application:

import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2';

bootstrap(<MyApp>, [
  FIREBASE_PROVIDERS,
  defaultFirebase('https://<your-firebase-app>.firebaseio.com')
]);

For more details about the configuration of the library, you could have a look at this link:

Upvotes: 2

Related Questions