Exception in Toolbar class No provider for NavBar

Sorry everyone, I’m new to TypeScript, Ionic, and Angular 2, so patience please!

I’ve been following the blog post https://blogs.msdn.microsoft.com/rido/2016/05/11/ionic2-and-visual-studio/
I’ve managed to get things compiling, and deploying to both Android, and Windows Phone Universal, but I just get a blank screen and the following exception. Need some guidance.

Thanks in advance.

Unhandled Promise rejection: EXCEPTION: Error in ./Toolbar class Toolbar - inline template:0:0
ORIGINAL EXCEPTION: No provider for Navbar!
ORIGINAL STACKTRACE:
Error: DI Exception
   at BaseException (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:1741:9)
   at AbstractProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29405:9)
   at NoProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29442:9)
   at ReflectiveInjector_.prototype._throwOrNull (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30439:13)
   at ReflectiveInjector_.prototype._getByKeyDefault (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30467:13)
   at ReflectiveInjector_.prototype._getByKey (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30430:13)
   at ReflectiveInjector_.prototype.get (ms-appx-web://com.ionicfr
zone.js (461,14)
   "Unhandled Promise rejection:"
   "EXCEPTION: Error in ./Toolbar class Toolbar - inline template:0:0
ORIGINAL EXCEPTION: No provider for Navbar!
ORIGINAL STACKTRACE:
Error: DI Exception
   at BaseException (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:1741:9)
   at AbstractProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29405:9)
   at NoProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29442:9)
   at ReflectiveInjector_.prototype._throwOrNull (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30439:13)
   at ReflectiveInjector_.prototype._getByKeyDefault (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30467:13)
   at ReflectiveInjector_.prototype._getByKey (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30430:13)
   at ReflectiveInjector_.prototype.get (ms-appx-web://com.ionicframework.communikateionic64974"
   "; Zone:"
   "<root>"
   "; Task:"
   "Promise.then"
   "; Value:"
   {
      [functions]: ,
      __proto__: { },
      _context: { },
      _originalException: { },
      _originalStack: "Error: DI Exception
   at BaseException (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:1741:9)
   at AbstractProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29405:9)
   at NoProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29442:9)
   at ReflectiveInjector_.prototype._throwOrNull (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30439:13)
   at ReflectiveInjector_.prototype._getByKeyDefault (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30467:13)
   at ReflectiveInjector_.prototype._getByKey (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30430:13)
   at ReflectiveInjector_.prototype.get (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30239:9)
   at NgModuleInjector.prototype.get (ms-appx-web://com.ionicframework.communikateionic649747",
      _wrapperMessage: "Error in ./Toolbar class Toolbar - inline template:0:0",
      _wrapperStack: "Error: Error in ./Toolbar class Toolbar - inline template:0:0
   at WrappedException (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:1759:9)
   at ViewWrappedException (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:32155:9)
   at DebugAppView.prototype._rethrowWithContext (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:33011:17)
   at DebugAppView.prototype.create (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:32957:13)
   at _View_MyApp0.prototype.createInternal (Function code:65:3)
   at AppView.prototype.create (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:32741:9)
   at DebugAppView.prototype.create (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:32954:13)
   at _View_MyApp_Host0.prototype.createInternal (Function code:16:3)
   at AppView.prototype.create (ms-appx-web://com.ionicframework.",
      context: { },
      message: "EXCEPTION: Error in ./Toolbar class Toolbar - inline template:0:0
ORIGINAL EXCEPTION: No provider for Navbar!
ORIGINAL STACKTRACE:
Error: DI Exception
   at BaseException (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:1741:9)
   at AbstractProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29405:9)
   at NoProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29442:9)
   at ReflectiveInjector_.prototype._throwOrNull (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30439:13)
   at ReflectiveInjector_.prototype._getByKeyDefault (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30467:13)
   at ReflectiveInjector_.prototype._getByKey (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30430:13)
   at ReflectiveInjector_.prototype.get (ms-appx-web://com.ionicframework.communikateionic64974",
      name: "Error",
      originalException: { },
      originalStack: "Error: DI Exception
   at BaseException (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:1741:9)
   at AbstractProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29405:9)
   at NoProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29442:9)
   at ReflectiveInjector_.prototype._throwOrNull (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30439:13)
   at ReflectiveInjector_.prototype._getByKeyDefault (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30467:13)
   at ReflectiveInjector_.prototype._getByKey (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30430:13)
   at ReflectiveInjector_.prototype.get (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30239:9)
   at NgModuleInjector.prototype.get (ms-appx-web://com.ionicframework.communikateionic649747",
      stack: "EXCEPTION: Error in ./Toolbar class Toolbar - inline template:0:0
ORIGINAL EXCEPTION: No provider for Navbar!
ORIGINAL STACKTRACE:
Error: DI Exception
   at BaseException (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:1741:9)
   at AbstractProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29405:9)
   at NoProviderError (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:29442:9)
   at ReflectiveInjector_.prototype._throwOrNull (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30439:13)
   at ReflectiveInjector_.prototype._getByKeyDefault (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30467:13)
   at ReflectiveInjector_.prototype._getByKey (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:30430:13)
   at ReflectiveInjector_.prototype.get (ms-appx-web://com.ionicframework.communikateionic64974",
      wrapperMessage: "Error in ./Toolbar class Toolbar - inline template:0:0",
      wrapperStack: "Error: Error in ./Toolbar class Toolbar - inline template:0:0
   at WrappedException (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:1759:9)
   at ViewWrappedException (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:32155:9)
   at DebugAppView.prototype._rethrowWithContext (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:33011:17)
   at DebugAppView.prototype.create (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:32957:13)
   at _View_MyApp0.prototype.createInternal (Function code:65:3)
   at AppView.prototype.create (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:32741:9)
   at DebugAppView.prototype.create (ms-appx-web://com.ionicframework.communikateionic649747/www/build/js/app.bundle.js:32954:13)
   at _View_MyApp_Host0.prototype.createInternal (Function code:16:3)
   at AppView.prototype.create (ms-appx-web://com.ionicframework."
   }

For better helping you, please provide some code snippet.

I just started getting the same error after updating Angular 2 to RC5,… and it sounds like others are as well: What Angular 2 version to use?.

The fix for me was to update package.json to explicitly use RC4:

"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "^2.0.0-rc.1",

Note: @angular/router is at RC2 so I left that as-is.

Thanks for the tip. I can confirm that I’m already running RC4 when experiencing this problem.

This is a vanilla sample from the cli tool. I haven’t modified anything. I need a baseline that works on Windows phone, Browser, Android, etc etc. I’m not even sure what code snippets I should provide for you.

UPDATE

So this appears to be an issue with npm install. Using command line works, but using the built-in Visual Studio npm restore doesn’t. It appears that the npm that Visual Studio uses is somehow different than the one used my the cli.

UPDATE 2

I changed the npm version that Visual Studio uses to solve this problem. More details here https://blogs.msdn.microsoft.com/webdev/2015/03/19/customize-external-web-tools-in-visual-studio-2015/

Were you able to get this to work with Angular 2 RC5? Meaning, after you updated Visual Studio settings to use a different version of NPM, were you able then to use RC5? I’d rather use Angular RC5 then RC4. But I also want to avoid this No provider for NavBar error.

And, what precisely did you update/change in the Visual Studio external tools window/settings?

Hey Kennedy,

I haven’t tried Angular RC5 yet, I’ll update when I do. As for the changes I made, I just followed the instructions in the link provided. Simply moved the PATH variable up one level, so Visual Studio checks it first, before checking the other locations.

So I tried out RC5 but I’m met with syntax errors in the definition file. Seems like someone needs to fix something.

I’ve now got this issue too and it is breaking my navigation.

Any proper resolution from anyone?

This is still an issue with 2.0.0-rc.6.