CODEWITHSUNDEEP
javascriptangularjsdependency-injectionionic-frameworkstripe-payments
Caleb Faruki
Caleb Faruki

Reputation: 2735

Cannot resolve stripe-angular dependency injection

I'm trying to incorporate a stripe-angular module into my Ionic/AngularJS app.

https://github.com/gtramontina/stripe-angular

I installed the app using npm install stripe-angular.

Here is where I inject the dependency into my app:

var myApp = angular.module('myApp', 
    ['ionic','ionic.utils','stripe','google.maps','myApp.controllers','myApp.services'])
.config(function($stateProvider, $urlRouterProvider, stripeProvider) { 
    stripeProvider.setPublishableKey('pk_test_APIKEY');
});

Without even injecting the dependency into any of my controllers or services, I am met with the following console error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: stripeProvider
http://errors.angularjs.org/1.2.25/$injector/unpr?p0=stripeProvider
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:7703:12
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11427:19
    at getService (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11555:39)
    at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11582:13)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11510:37
    at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
    at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11497:5)
    at createInjector (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11437:11)
    at doBootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9069:20)
    at bootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9084:12)
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=myApp&p1=Error%…%3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A9084%3A12)

This is the relevant portion of my index.html file:

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="js/services.js"></script>

Is there something I am doing wrong in my dependency injection or perhaps some thing I am overlooking? Please be detailed in your answer if you can! Thanks.

Upvotes: 0

Views: 1245

Answers (1)

James
James

Reputation: 11931

It looks like the directions from the stripe-angular readme are missing a step. The script include from their step #2:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

Refers to the main script for Stripe, not the stripe-angular directive. You were getting the error because the stripe-angular module ('stripe') is not included in this script.

To fix it, you need to first do step #1 from the readme, download stripe-angular with Bower, then also include a second script reference to stripe-angular.js:

<script src="your-bower-folder/stripe-angular.js"></script>

Upvotes: 2

Related Questions