ngStorage module not found only in gulp dist:serve?

Question

I strike this error one again, last time I have fixed but do not know how this fixed but again it occurs.

I have ngstorage module installed and projecr run fine when it's in development ( gulp clean serve ) BUT when it goes to production ( gulp serve:dist) , it execute well but main page is blank and there is error in console

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:modulerr] Failed to instantiate module ngStorage due to: Error: [$injector:nomod] Module 'ngStorage' 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. http://errors.angularjs.org/1.5.8/$injector/nomod?p0=ngStorage

although I have checked that it's installed can somebody can suggest what is the issue and how to fix this? here is my bower.json

{
  "name": "project",
  "version": "0.1.1",
  "dependencies": {
    "angular-animate": "1.5.8",
    "angular-touch": "~1.5.0",
    "angular-sanitize": "~1.5.0",
    "angular-messages": "~1.5.0",
    "angular-aria": "~1.5.0",
    "jquery": "~2.1.4",
    "angular-resource": "~1.5.0",
    "angular-ui-router": "~0.2.15",
    "bootstrap": "~3.3.6",
    "angular-bootstrap": "~1.1.2",
    "angular-toastr": "~2.0.0",
    "moment": "~2.13.0",
    "animate.css": "~3.4.0",
    "angular": "~1.5.0",
    "ng-table": "^1.0.0",
    "pace": "~1.0.2",
    "metisMenu": "~2.0.2",
    "fontawesome": "~4.5.0",
    "roboto-fontface": "^0.7.0",
    "angular-ui-validate": "^1.2.2",
    "ng-stomp": "^0.2.0",
    "angular-scrollable-table": "^1.1.1",
    "aws-sdk": "aws-sdk-js#^2.7.7",
    "ng-file-upload": "^12.2.13",
    "angular-recaptcha": "^4.0.3",
    "ng-csv": "^0.3.6",
    "ngstorage": "^0.3.11",
    "intl-tel-input": "5.1.7",
    "international-phone-number": "^0.0.16",
    "angular-chart.js": "^1.1.1"
  },
  "devDependencies": {
    "angular-mocks": "1.5.8"
  },
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/fonts/glyphicons-halflings-regular.eot",
        "dist/fonts/glyphicons-halflings-regular.svg",
        "dist/fonts/glyphicons-halflings-regular.ttf",
        "dist/fonts/glyphicons-halflings-regular.woff",
        "dist/fonts/glyphicons-halflings-regular.woff2"
      ]
    },
    "fontawesome": {
      "main": [
        "less/font-awesome.less",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2"
      ]
    },
    "roboto-fontface": {
      "main": [
        "css/roboto/less/roboto-fontface.less"
      ]
    },
    "chart.js": {
               "main": [
                   "dist/Chart.bundle.min.js"
               ]
           }
   },
  "resolutions": {
    "jquery": "~2.1.4",
    "angular": "1.5.8"
  },      
  "description": "Project Manager On-Premise",
  "main": "",
  "homepage": "index.html",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

I think there is issue related to stmop or I am using broswer-sync , that may be cause but cant be sure.

see the

score 1 · Answer 1 · answered Jul 04 '17 at 04:20

Issue was dues to one of library --which is included-- missing semicolon in it's main js file

cause:

I was using ng-stomp in my project and installed this library using bower install and when I run gulp dist:serve it minified all the files which are mentioned in the main bower.json file and it read bower_components/ng-stomp/package.json where main file location was "main": "src/ng-stomp.js" and this file missing semicolon in the end so when next js library ( ngStorage) is minified, it does not recognize by it's parser and it throws error.

solution:

override the main file by writing below code in my bower.json overrides block ( add the ng-stomp.min.js which has semicolon in end)

 "ng-stomp": {
            "main": [
                "dist/ng-stmop.min.js"
            ]
        }

hope it helps someone

ngStorage module not found only in gulp dist:serve?

1 Answers1