CODEWITHSUNDEEP
mean-stackangular-materialmean.io
tkarls
tkarls

Reputation: 3289

Add angular-material to mean.io app

I'm trying to add angular-material to a mean.io application.

I have, in my custom package, used bower to install angular-material and now I have a .../public/assets/lib/angular-material folder.

So far so good. Now I want to use it in my custom mean.io module and according to their documentation I have added

MyPackage.angularDependencies(['ngMaterial']);

in my app.js file.

I have also aggregated angular-material.css and angular-material.js (not sure if this should be needed).

But, I get the following error:

Failed to instantiate module mean due to:
Error: [$injector:modulerr]     http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=m...)
at Error (native)
at http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:6:416
at http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:38:391
at n (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:7:333)
at g (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:37:488)
at http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:38:134
at n (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:7:333)
at g (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:37:488)
at eb (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:41:249)
at c (http://127.0.0.1:3001/bower_components/angular/angular.min.js?v=90fb950dbc3e9296755d9cc23a211744:19:463

I'm assuming mean doesn't find the angular-material module and I need to specify its path somewhere. But I can't figure out where.

Upvotes: 4

Views: 772

Answers (1)

Henrique Rotava
Henrique Rotava

Reputation: 801

I had the same problem, this is happening because angular couldn't resolve some required libraries by material, I didn't get so deep into this investigation but I found an alternative solution as described below:

Navigate to the project root directory and then install angular material using bower: 

$ bower install angular-material --save

Then, into the project root directory you will find the /config/assets.json file where AngularJS is included, now you add the angular material libraries like this:

{
  "core": {
    "css": {
      "bower_components/build/css/dist.min.css": [
        "bower_components/angular/angular-csp.css",
  ->    "bower_components/angular-material/angular-material.css",
        "bower_components/angular-ui-select/dist/select.min.css"
      ]
    },
    "js": {
      "bower_components/build/js/dist.min.js": [
        "bower_components/jquery/dist/jquery.min.js",
        "bower_components/angular/angular.min.js",
    ->  "bower_components/angular-aria/angular-aria.js",
    ->  "bower_components/angular-animate/angular-animate.js",
    ->  "bower_components/angular-material/angular-material.js",
        "bower_components/angular-mocks/angular-mocks.js",
        "bower_components/angular-cookies/angular-cookies.min.js",
        "bower_components/angular-resource/angular-resource.min.js",
        "bower_components/angular-sanitize/angular-sanitize.min.js",
        "bower_components/angular-ui-router/release/angular-ui-router.min.js",
        "bower_components/angular-jwt/dist/angular-jwt.min.js",
        "bower_components/angular-bootstrap/ui-bootstrap-tpls.js",
        "bower_components/angular-ui-select/dist/select.min.js",
        "bower_components/web-bootstrap/index.js"
      ]
    }
  }
}

I know mean.io says to not alter the core packages, but I didin't find another way to make it work, if anybody has a better solution, please tell us.

Upvotes: 3

Related Questions