Cannot resolve all parameters error

Hi All,

I’m having the following ts code.

import {Page, NavController} from 'ionic-framework/ionic';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(nav: NavController){
  }
}

and I’m getting the following error.


Error: Cannot resolve all parameters for 'HomePage'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'HomePage' is decorated with Injectable.
    at NoAnnotationError.BaseException [as constructor] 

I’ve had a look on the FAQ, ionic NavController example and the documentation. But I cannot spot an error on why its complaining. For me it seems like Im importing everything correctly.

What I could be doing wrong, thanks in advance

cheers,

Sam

Below are my system info

Your system information:

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.9.0
Gulp local:  
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: 5.0.2 
OS: Mac OS X El Capitan
Node Version: v4.1.1
Xcode version: Xcode 7.0.1 Build version 7A1001 
1 Like

Your build does not appear to be recognizing the NavController as a provider. You could add a reference to it in the providers list like this, but it may wind up giving you a new NavController or may need additional providers to create.

@Page({
  templateUrl: 'build/pages/home/home.html'.
  providers: [NavController]
})

I’m not sure when the NavController is normally added to the provider list, but it appears to be sometime after the initial app load, so I’d be cautious using the above.

Another option is you can grab the NavController from the IonicApp class like this:

constructor(app: IonicApp){ this.app = app } ... this.app.getComponent('nav'); ...

@swarner that is incorrect.

Hey there, so are you using typescript of the regular JS version?

Thanks @swarner, I’ll try that :thumbsup:

Hi @mhartington,

What happend was

  • I created a normal v2 project ionic start demoProject blank --v2
  • it created me a home component
  • then I tried to add NavController
#home.js
import {Page, NavController} from 'ionic-framework/ionic';

@Page({
  templateUrl: 'build/pages/home/home.html'
})

export class HomePage {
  constructor(nav: NavController){

  }
}
  • I got the following error,
ERROR in ./app/pages/home/home.js
Module build failed: SyntaxError: /<path>/app/pages/home/home.js: Unexpected token (9:17)
   7 | 
   8 | export class HomePage {
>  9 |   constructor(nav: NavController){
     |                  ^
  10 | 
  11 |   }
  12 | }
  • So I found this discussion, and when I changed the file to .ts, and that made the above error go away. Thats what made me think, this is a .ts file :slightly_smiling:

cheers

1 Like

Not exactly the solution to the problem.

This is part of the difference between how JS and TS handle parameter decoration. So nav: NavController is valid typescript, but not valid javascript.

So in your case, you probably pulled that from the docs, which reference typescript examples. in that case, you’ll want to use this for Javascript

export class ListPage {
  static get parameters() {
    return [[NavController], [NavParams]];
  }

  constructor(nav, navParams) {}
}

https://github.com/driftyco/ionic2-starter-sidemenu/blob/master/app/pages/list/list.js

4 Likes

Hey @mhartington, thanks for the detailed reply, that explains my issue. You are right I got confused with js and ts. I’ll keep that in mine next time :+1:

cheers,

Sam

Which part is incorrect? I’ve had the same problem in my Typescript build, and this was the fix used to work around it. Adding NavController to the @App required providers which were unspecified. The app.getComponent(
‘nav’) workaround I mentioned works beautifully in a production app currently.

What am I overlooking with my current implementation?

That is not how NavController is meant to be included.
If you are using JS, see the above post.

If you’re using TS, you can import it like so:

constructor(
  public nav: Navcontroller
){}

So this is what happens when I use similar code:

EXCEPTION: No provider for NavController! (MyApp -> SomeService-> NavController)BrowserDomAdapter.logError @ app.bundle.js:32184
app.bundle.js:32184 STACKTRACE:BrowserDomAdapter.logError @ app.bundle.js:32184
app.bundle.js:32184 Error: DI Exception
at NoProviderError.BaseException [as constructor] (app.bundle.js:7840)
at NoProviderError.AbstractProviderError [as constructor] (app.bundle.js:8536)
at new NoProviderError (app.bundle.js:8572)
at Injector._throwOrNull (app.bundle.js:6894)
at Injector._getByKeyDefault (app.bundle.js:6945)
at Injector._getByKey (app.bundle.js:6885)
at Injector._getByDependency (app.bundle.js:6871)
at Injector._instantiate (app.bundle.js:6764)
at Injector._instantiateProvider (app.bundle.js:6754)
at Injector._new (app.bundle.js:6743)

The relevent code is:

@Injectable()
export class SomeService{
    private _nav: NavController;

    constructor(someFactory: SomeFactory, nav: NavController) {
        this._someFactory= someFactory;
        this._nav = nav;
    }

This is being injected in the constructor for the top level application class (@App). When using the approach I suggested earlier, I have no problem whatsoever. What would you propose that I have done wrong to generate this problem?

note: For version control purpose we are developing with “ionic-framework”: “2.0.0-alpha.53”, “angular2”: “2.0.0-beta.1”,

Very interesting! Does that NavController let you push things to it? Usually NavController providers are instantiated because somewhere there is an ancestor component that extends NavController, like a Nav or a Tab or Tabs.

Conceptually I’m not sure how a NavController that isn’t associated with some sort of component would work, because where are things being pushed to?

From a technical standpoint, I’m not sure how that could be working, because it doesn’t look like NavController is Injectable (in the beta.2 or in alpha.53), so angular would have no way of knowing to provide its dependencies.

Also, NavController has an ElementRef as part of its constructor, which I would think would fail if it were in the providers array and not coming from a component.

But! I believe you that the code is working, so I’m genuinely curious what’s going on here. What is your use case? If it’s related, could you weigh in on https://github.com/driftyco/ionic/issues/5543? Navigation is something where I think we want to better understand how people expect it to be working, so we make sure it’s easy to do or document the common points of confusion really well. Thanks!

Looking a little closer at our codebase, I think I can clear up a little of the confusion regarding this particular instance.

In the app.html associated with our app.ts file we defined a ion-nav like so:

<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

This is the element that is getting consumed by the getComponent reference. We had obtained this code, I believe, from an early sample app that was provided. I could not find reference to the initial project, but this is the current code given by the menu docs provided here. The current use case for the code I posted previously is similar. We have a service that will return a user to the landing page under certain conditions.

As a followup to this problem, I scanned through the source code for app.ts, as it seems we’ve probably been abusing it, and noticed that many of the methods in this class are commented as private, but the private keyword is not utilized. Is this intentional? With the way that the previously linked menu docs were written, it seems to imply that at least this method is intended to be used as public, though the code comments imply this is misuse. At the very least this causes some confusion regarding best practices.

So to summarize-
I was unaware about how some of our features were fully implemented and left out a major detail about the directive in the app.html. This likely caused the rest of the above to work. I do find it interesting that I’d need to go through the HTML side of things to grab the nav in my implementation.

1 Like

Hey @swarner, thanks, this was not a well documented case and neither was getComponent. I’ve changed the visibility of IonicApp: https://github.com/driftyco/ionic/commit/4a21fb02f8cad5216d22b85da3257e5076f43096, so it should now show up in the API docs, as well as updated the documentation on navigating from the root component: http://ionicframework.com/docs/v2/components/#navigating_from_root, so hopefully things are a little clearer now.

Hi!

I got an error when I build my apk for release.
Build and signing goes fine but when I try to run my app on my android device I got this error:

Uncaught Error: Can’t resolve all parameters for HomePage: ([object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], ?). main.js:92667.

When i install ap with ionic run android everything goes fine.

Please help

What’s the last parameter of your HomePage constructor? That looks like the culprit.

2 Likes
constructor(    
   public navCtrl: NavController, 
   public googleplus: GooglePlus,
    public alertCtrl:AlertController,
    private platform:Platform,
    public auth:Auth,  
   public user:User){ }

still it shows can’t resolve for all paramaters for Auth?

Any help :slight_smile:

1 Like

Hi, I am facing the same issue with the current Ionic 3.5.3 version. Did you manage to solve it?

What is the error message that you’re receiving and what does the relevant file look like?

The error message was the same as this thread’s question. I was able to resolve it. I was importing and using ‘App’ inside of a @injectable provider that was the cause. My guess is probably a cyclic dependency was established somewhere…