Injector-error: Failed to instantiate module servicesApp

Question

I have problem of injection of modules in angularJS:

Uncaught Error: [$injector:modulerr] Failed to instantiate module Mainapp due to: Error: [$injector:modulerr] Failed to instantiate module servicesApp due to: Error: [$injector:nomod] Module 'servicesApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Here is the service code servicesApp.js :

'use strict';

var servicesApp = angular.module('servicesApp', []);

servicesApp.service('fileUpload', ['$http',function ($http) {

    this.uploadFileToUrl = function(file, uploadUrl){
        var data = new FormData();
        data.append('file', file);

        return $http.post(uploadUrl, data, {
            transformRequest: angular.identity,
             headers: { 'Content-Type': undefined }
          }).then(function (results) {
              console.log("done post "+results);
              return results;
        }).catch(function(e) {
            console.log('failed to post: ', e);
            throw e;
        });
    };

     this.upFile=function(file){

        var nameImg="";
        var uploadUrl =urlAPI+"/files/uploadFile";

        if( file != null){

            nameImg =file.name;

              this.uploadFileToUrl(file, uploadUrl);

          }else{
              nameImg="userDefault.png";
          }

      return nameImg;
   };

}]);

Here is the directive code directivesApp.js :

'use strict';

var directivesApp = angular.module('directivesApp', []);

directivesApp.directives('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
           var model = $parse(attrs.fileModel);
           var modelSetter = model.assign;

           element.bind('change', function(){
              scope.$apply(function(){
                 modelSetter(scope, element[0].files[0]);
              });
           });
        }
     };
  }]);

Here is the Main code Mainapp.js :

var app = angular.module('Mainapp', ['ngRoute','file-model','ui.bootstrap','ngMessages','angular-loading-bar','ngFileUpload','servicesApp',
    'directivesApp']);

---

Edit1:

I changed the position of 'directives‌​App' and 'servicesApp' but I still have the same problem:

var app = angular.module('Mainapp', ['ngRoute','file-model','ui.bootstrap','ngMessages','angular‌​-loading-bar','ngFil‌​eUpload','directives‌​App','servicesApp'])‌​;

---

Edit 2:

Uncaught TypeError: directivesApp.directives is not a function at directivesApp.js:13

directivesApp.directives('fileModel', ['$parse', function ($parse) { ..}

How to solve this problem? How to use directives and services in a controller?

thank you,

Answer 1

The sytanx should be directive, Change

From

directivesApp.directives('fileModel', ['$parse', function ($parse) { ..}

To

directivesApp.directive('fileModel', ['$parse', function ($parse) { ..}