CODEWITHSUNDEEP
firebaseangular
celsomtrindade
celsomtrindade

Reputation: 4671

Defining Firebase default in angular 2

I'm new to angular 2, so be patient!

I'm trying to put together Angular2 and Firebase to have a real time app to update information on the page. By looking at the Firebase github for Angular2, they say to inject Firebase and also define a base url for the whole app, like so:

import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2';

bootstrap(App, [
  FIREBASE_PROVIDERS,
  defaultFirebase('https://my.firebaseio.com')
]);

The problem is, I'm using AngularRouter defined on the bootstrap as well. When I try to initiate the app like this:

import {ROUTER_PROVIDERS} from 'angular2/router'
import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2'

bootstrap(AppComponent, [ROUTER_PROVIDERS,
    FIREBASE_PROVIDERS,
    defaultFirebase('https://my.firebaseio.com') //In my code I'm using my own url
]);

I get this error:

angular2-polyfills.js:1243 SyntaxError: Unexpected token <(…)

My structure is like this:

app.component.ts
boot.ts
--home/home.component.ts
--user/user.component.ts
--post/post.component.ts

And the firebase is going to be used on the user and post component (at least for this test).

I know, based on the Angular doc we should avoid this type of declaration on a root level because it will create an instance of each independent. But in this case, isn't it necessary to declare it here?

What is going on and how can I solve this?

Edited:

As requested, this is my html file:

<head>
    <base href="/">
    <title>Angular 2 Firebase</title>

    <link rel="stylesheet" href="assets/stylesheets/bootstrap.min.css" />

    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>

    <script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>

    <script>
        System.config({
            packages: {        
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
           }
        });
        System.import('app/boot').then(null, console.error.bind(console));
    </script>

</head>

<body>
    <my-app>Loading...</my-app>
</body>

Note: The error only appear when I insert the code for default firebase in the boot.ts. Before I do this, the application works just fine!

Upvotes: 1

Views: 634

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202216

You need to include angularfire2 into your HTML file in your SystemJS configuration:

System.config({
  map: {
    firebase: '/node_modules/firebase/lib/firebase-web.js',
    angularfire2: ' node_modules/angularfire2'
  },
  packages: {      
    angularfire2: {
      main: 'angularfire2.js',
      defaultExtension: 'js'
    },app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
});

to be able to inject elements from this library.

You also need to remove the script element for Firebase in the head of your HTML page:

<!-- script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script -->

The library needs to be installed using npm install firebase and referenced from the SytemJS configuration.

See the following HTML page as a reference:

Upvotes: 2

Related Questions