1
votes

Typescript compiler - supplied parameters do not match any signature of call target.

I'm creating an angular2 app with typescript. When I setup instance to firebase it gives me this error in the git bash command line: "supplied parameters do not match any signature of call target".

Its complaining about this line of code it says:

this.data = new AngularFire(new Firebase('https://markng2.firebaseio.com/users'));

This is the code for the app.ts file:

   import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
   import {Router, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
   import {Injectable} from 'angular2/angular2';
   import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';

   import {Todo} from './components/todo/todo';
   import {About} from './components/about/about';
   import {AuthService} from './authService';
   import {EnvironmentService} from './environmentService';

   import {AngularFire, FirebaseArray} from '../firebase/angularfire';

   @Component({
           selector: 'app'
   })

   @View({
       template: `
           <div class="container">
               <nav>
                <ul>
                    <li><a [router-link]="['/Home']">Todo</a></li>
                    <li><a [router-link]="['/About']">About</a></li>
                   </ul>
               </nav>
            <router-outlet></router-outlet>
           </div>
        `,
       directives: [RouterOutlet, RouterLink]
   })

   @RouteConfig([
    { path: '/', redirectTo: '/home' },
    { path: '/home', component: Todo, as: 'Home' },
    { path: '/about', component: About, as: 'About' }
   ])

   @Injectable()
   export class AppComponent {
       store:FirebaseArray;
       data: AngularFire;

       constructor(_router: Router, _authService: AuthService){ 

           //Firebase setup - Here the line below seems to be the issue???:
           this.data = new AngularFire(new Firebase('https://markng2.firebaseio.com/users'));
           this.store = this.data.asArray();        

           _router.subscribe((val) => {     

               _authService.isUserLoggedIn().then((success) => {    
                   if(!success){                    
                       _router.navigate(['/About']);
                   }else{
                       _authService.getSpotifyData().then((success) => {    
                           console.log(success);                        
                       });  
                   } 
               });  
           })
       }
   }

   bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), HTTP_PROVIDERS, AuthService, EnvironmentService]);

This is the Git Bash Command error:

enter image description here

1
where is defined Firebase ? - Hacketo
I'm storing Firebase files locally and my index.html is linking to the scripts. and the App.ts file is the code above. Firebase seems to work fine and angular 2. But typescript still shows me the error. - AngularM
Is this constructor OK? I can't see something like this in definition: github.com/DefinitelyTyped/DefinitelyTyped/blob/master/… - mat3e
I think the constructor is fine, because you new the object instead of injecting it into the constructor. - AngularM
I tried to have a look. The only thing I have noticed is that github.com/DefinitelyTyped/DefinitelyTyped/blob/master/… @deprecated. Not possible with AngularFire 1.0+. Maybe it is of some importance. - Martin Vseticka

1 Answers

3
votes

Update: We are working on AngularFire2 right now

I think the confusion here is that there is no AngularFire for Angular 2 right now.

The current AngularFire 1.0+ is not compatible with Angular 2. It's AngularJS 1.2+ only.

This AngularFire for Angular 2 is something I wrote for this presentation. It's not officially supported.

While there is no official integration with Firebase and Angular 2 at this time, The Firebase SDK works perfectly fine due to the magic of zone.js.