Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- mdTabsPaginationDirective

[palmani]

While adding the below code for tab, getting Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- mdTabsPaginationDirective

It's working properly using without ionic, but while adding the control into ionic project getting the error:

md-content
md-tabs
md-tab label="Tab #1" md-tab
md-tab label="Tab #2" md-tab
md-tab label="Tab #3" md-tab
md-tabs
md-content

Resolved:

Need to replace the provider service from where $$q to $q in angular-material.js

[gkalpak]

Both services exist ($q and $$q) and they are slightly different (plus $$q is mainly intended for private use).

Shooting in the dark, are you using the latest version of Angular ?
What versions (of Angular and other dependencies/modules) are you using ?

[ThomasBurleson]

@palmani - the header for the angular-material[.min].js will have the version and SHA. Please make sure you are using 0.6.1 or greater:

/*!
 * Angular Material Design
 * https://github.com/angular/material
 * @license MIT
 * v0.6.1-master-44a3322
 */

[palmani]

Thanks for your replay,

I'm using this below version in my code.

/*!

• Angular Material Design
• https://github.com/angular/material
• @license MIT
• v0.6.1
  */

[gkalpak]

@palmani: Again, this sounds more like an angular version problem (not angular-material version), so make sure you are using Angular v1.3.0-beta.14 or newer.

[palmani]

Hi,

Thanks,

I'm using these below version for angulajs. Also, if i'm using with ionic mdTextField is not wokring, the input textbox bottom border is not showing.
/**

• @license AngularJS v1.3.6
• (c) 2010-2014 Google, Inc. http://angularjs.org
• License: MIT
  */

[ThomasBurleson]

Angular Material requires Angular ~1.3.x; since the undocumented $$q feature is available only in those recent versions. You should not replace $$q with $q; since $q triggers digest changes. $$q was specifically used for performance reasons.

[palmani]

@ThomasBurleson Thanks,

Sure, I will follow the same. while i'm integrating angualr-material with ionic getting these kind of issues.

While adding the below code for tab, getting Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- mdTabsPaginationDirective

Can you please help me to fix this.

[ThomasBurleson]

@palmani - can you provide a CodePen/Plunkr that demonstrates this issue. Or send me a zip...
I need more information before I can provide a suggestion.

[palmani]

Thanks, I have sent my code into your gmail id. Can you please check and revert.

[ThomasBurleson]

@palmani

Ionic v1.0.0-beta.13 is bundling Angular v1.2.25.

Angular Material requires Angular v1.3.4 or higher.

This means you current cannot use ionic.bundle.js if you want to also use Angular Material.

Here is a modified script sequence that should work for developers until the Ionic bundle is fixed:

    <!-- Foundation libraries (load first) -->

    <script src="lib/ionic/js/jquery/jquery-2.1.1.min.js"></script>
    <script src="lib/ionic/js/underscore/underscore.js"></script>
    <script async="" src="//www.google-analytics.com/analytics.js"></script>

    <!-- Angular libraries (since ionic.bundle.js is invalid) -->
    <script src="lib/ionic/js/angular/angular.js"></script>
    <script src="lib/ionic/js/angular/angular-sanitize.js"></script>
    <script src="lib/ionic/js/angular-animate/angular-animate.js"></script>
    <script src="lib/ionic/js/angular-aria/angular-aria.js"></script>
    <script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>

    <!--Material Design-->
    <script src="lib/ionic/js/hammerjs/hammer.js"></script>
    <script src="lib/ionic/js/angular-material/angular-material.js"></script>


    <!-- ionic-angular.js is INVALID

        ionic.bundle.js is using incorrect version of Angular-animate (need 1.3.6 instead of v1.2.25)
        ionic.bundle.js is loaded old version of AngularJS (need 1.3.5 or greater; which has $$q)

        <script src="lib/ionic/js/ionic.bundle.js"></script>
    -->
    <script src="lib/ionic/js/ionic.js"></script>
    <script src="lib/ionic/js/ionic-angular.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/cordova.js"></script>

Please note that there also appears to be an error in angular-aria.js: (v1.3.6) can experience a null reference for ngModel.$validators at line 237.

[ThomasBurleson]

BTW, I will report these issues to Angular core and IonicFramework.

[adamdbradley]

Ionic beta13 uses angular 1.2. The latest nightly builds of Ionic, which will become beta14, uses Angular 1.3.6.

[ThomasBurleson]

#woot 👍
@adamdbradley - Here's a thought. How about also publishing a ionic-angular-material.js which simply configures the module dependency on 'ngMaterial' ? This would allow developers an easy way to build hybrid Ionic/Material apps.