2

I am first time using AngularAMD and RequireJS. I am trying to inject one service (appService) in app.run() but I am getting error:

Unknown provider: appServiceProvider <- appService

main.js:

var bowerPath = 'bower_components/';
require.config({
    baseUrl: "./",
    /**
     * Specify the abbreviation for the paths.
     * **/
    paths: {
        'jquery': bowerPath + 'jquery-2.2.1.min/index',
        'angularAMD': bowerPath + 'angularAMD/angularAMD.min',
        'angular': bowerPath + 'angular/angular.min',
        'ngRoute': bowerPath + 'angular-route/angular-route.min',
        'ngResource': bowerPath + 'angular-resource/angular-resource.min',
        'ui-bootstrap': bowerPath + 'angular-ui-bootstrap/dist/ui-bootstrap-tpls.min',
        'ngGrowl': bowerPath + 'angular-growl-v2/build/angular-growl.min',
        'ngAnimate': bowerPath + 'angular-animate/angular-animate.min',
        'moment': bowerPath + 'moment/min/moment.min',
        'ngProgress': bowerPath + 'ngprogress/build/ngprogress.min',
        'shared': './shared',
        'routeConfig': './shared/routeConfig',
        'httpConfig': './shared/httpConfig',
        'ngGrowlConfig': './shared/ngGrowlConfig',
        'app': 'shared/app',
    },

    /** 
     * Specify the order of loading the dependancies
     * **/
    shim: {
        "jquery": {
            exports: "jquery"
        },
        "angular": {
            exports: "angular"
        },
        "ngResource": {
            deps: ["angular"],
            exports: "ngResource"
        },
        "ui-bootstrap": {
            deps: ["angular"],
            exports: "ui-bootstrap"
        },
        "ngAnimate": ["angular"],
        "ngRoute": ["angular"],
        "angularAMD": ["angular"],
        "ngGrowl": ["angular"],
        "ngProgress": ["angular"],
    },
    /**
     * Kick start the application
     *  **/
    deps: ['app']
});

app.js:

define(['jquery', 'angular', 'angularAMD', 'ngRoute', 'ngResource', 'ui-bootstrap', 'routeConfig', 'httpConfig', 'ngAnimate', 'ngGrowlConfig', 'ngGrowl', 'ngProgress', , 'shared/app.service'],
    function ($, ng, ngAMD, ngRoute, ngResource, uiBootstrap, routeConfig, httpConfig, ngAnimate, ngGrowlConfig, ngGrowl, ngProgress) {
        var app = ng.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngResource', 'angular-growl', 'ngProgress']);
        routeConfig(app);
        httpConfig(app);
        ngGrowlConfig(app);
        app.run(["$http", "$rootScope", "$location", '$injector', function ($http, $rootScope, $location,$injector) {
          appService = $injector.get('appService');
        }]);
        return ngAMD.bootstrap(app);
    });

app.service.js

define(['app', 'ngProgress', 'shared/app.resource'],
    function (app) {
        'use strict';
        app.service('appService', ['$q', 'appConstants', '$filter', 'ngProgressFactory', function ($q, appConstants, $filter, ngProgressFactory) {
            //prevent closure.
            var _self = this;

            this.ngProgress = null;

            this.ngProgressInig = function () {
                _self.ngProgress = ngProgressFactory.createInstance();
            }

        }]);
    });

EDIT:

I tried to make following change in my app.js:

  var appAmd = ngAMD.bootstrap(app);
        app.run(["$http", "$rootScope", "$location", '$injector', function ($http, $rootScope, $location, $injector) {
            appService = $injector.get('appService');
        }]);
        return appAmd;

And now I am getting error:

TypeError: Cannot read property 'service' of undefined(…)

This error is coming form app.service.js as app is undefined.

Saurabh Palatkar
  • 3,242
  • 9
  • 48
  • 107
  • You didn't include appService within app.js as a dependency. Also, you need to add the app.service.js file in main.js so that the file is loaded for angular to use. – matt Apr 24 '16 at 15:37

0 Answers0