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.

[palmani]

Hi Thomas,

Thanks for your help.

It's working now.

Thanks,
Palmani. K
On 15/12/2014 9:34 pm, "Thomas Burleson" notifications@github.com wrote:

@palmani https://github.com/palmani

Ionic Beta3 is bundling Angular v1.2.25 (instead of Angular v1.3.4 or
higher... which is required by Angular Material). This means you cannot use
ionic.bundle.js if you want to also use Material.

Here is a modified script sequence that should work for you until Ionic 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 ref ngModel.$validators at line 237.

—
Reply to this email directly or view it on GitHub
#892 (comment).

[FrancisVarga]

i fixed this with the
"devDependencies": {
"ionic": "ionic-team/ionic-bower#1.0.0-beta.14"
},