Can't resolve all parameters for

Ionic Framework ionic-v3
1

I have Local service:

import { Injectable } from "@angular/core";
import { Storage } from "@ionic/storage";
import { Globals } from "./globals";
import { Api } from "./api";
import { Page2 } from "../pages/page2/page2";
import { CategoryPage } from "../pages/category/category";
import { RegPage } from "../pages/reg/reg";
import { LoginPage } from "../pages/login/login";
import { AccountPage } from "../pages/account/account";
import { BasketPage } from "../pages/basket/basket";

@Injectable()
export class Local{

  constructor(public st : Storage, public gl : Globals, public api : Api){
  }

  public getToken(){
    return this.st.get('token');
  }

  public removeToken(){
    return this.st.remove('token');
  }

  public setToken(token){
    this.st.set('token', token);
  }

  public makeMainMenu(mode : boolean){ // mode: true - logged
    this.api.getCategories().then(cats =>{

      this.gl.mainMenu = [];
      if(!mode){
        this.gl.mainMenu.push({title : 'Login', component : LoginPage});
        this.gl.mainMenu.push({title : 'Register', component : RegPage});
      }

      for(let i = 0; i < cats.length; i++){
        this.gl.mainMenu.push({
          title     : cats[i].name,
          component : CategoryPage,
          params    : {cat : cats[i].id, name : cats[i].name}
        });
      }

      if(mode){
        this.gl.mainMenu.push({title : 'Account', component : AccountPage});
        this.gl.mainMenu.push({title : 'Basket', component : BasketPage});
      }

      this.gl.mainMenu.push({title : 'About', component : Page2});

    }, err =>{
      console.log(err);
    });


  }

}

When trying to inject it into component
LoginPage.ts

constructor(public navCtrl: NavController, public navParams: NavParams, public local: Local, public api: Api, public fb: FormBuilder

i get:

Uncaught Error: Can't resolve all parameters for LoginPage: (NavController, NavParams, ?, Api, FormBuilder)

Global service:

import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
  public mainMenu: any[];
  public user: any;

  constructor() {}

}

Api service

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs';

@Injectable()
export class Api {

  constructor(public http: Http) {
    console.log('Hello Api Provider');
  }

  public login(loginData){
    console.log(loginData);
    let headers = new Headers();
    return this.http.post('http://<site>/api/login', loginData, {headers: headers}).map(res => res.json()).toPromise();
  }

  public register(data){
    console.log(data);
    let headers = new Headers();
    return this.http.post('http://<site>/api/register', data, {headers: headers}).map(res => res.json()).toPromise();
  }
}

Whats wrong with service Local? in rc.5 it worked

When i remove function makeMainMenu - everything is ok

2

It looks like Local and LoginPage have a circular dependency. You can try using forwardRef to break it.

1 Like
3

You are right. I removed
import { LoginPage } from "../pages/login/login";
from Local and everything is ok
Thanks a lot.

4

I also came across the same situation. It was because of circular dependency. Removed the circular dependency and it worked fine.