Cannot read property 'Item' of undefined

[aviadhahami]

Hi! Once I try to run this directive - without doing anything, just injecting it - I receive this:

any clue how to solve this?

[macdonaldr93]

👍 I'm having the same issue.

[macdonaldr93]

So I got it to work...

bower install jquery jquery-bridget --save and then move them above angular-masonry.

So you have something like this:

{
  "name": "yourapp",
  "version": "1.0.0",
  "dependencies": {
    "angular": "~1.5.0",
    "jquery": "^2.2.3",
    "jquery-bridget": "^2.0.0",
    "bootstrap-sass-official": "~3.1.1",
    "bootstrap": "~3.1.1",
    "bootstrap-social": "~4.9.1",
    "angular-resource": "~1.5.0",
    "angular-cookies": "~1.5.0",
    "angular-sanitize": "~1.5.0",
    "angular-bootstrap": "~1.1.2",
    "font-awesome": ">=4.1.0",
    "lodash": "~2.4.1",
    "angular-socket-io": "~0.7.0",
    "angular-ui-router": "~0.2.15",
    "angular-validation-match": "~1.5.2",
    "angular-masonry": "^0.16.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.5.0"
  },
  "resolutions": {
    "angular": "~1.5.0",
    "jquery": "^2.2.3"
  }
}

[aviadhahami]

@macdonaldr93 this still isn't working for me :cry:

[macdonaldr93]

@aviadhahami are you using wiredep by any chance?

[macdonaldr93]

I ended up having to add overrides to my wiredep too. Forgot to include that. Here's what my gulp task looks like now.

// inject bower components
gulp.task('wiredep:client', () => {
    return gulp.src(paths.client.mainView)
        .pipe(wiredep({
            "overrides": {
              "isotope": {
                "main": [
                  "js/item.js",
                  "js/layout-mode.js",
                  "js/isotope.js",
                  "js/layout-modes/vertical.js",
                  "js/layout-modes/fit-rows.js",
                  "js/layout-modes/masonry.js"
                ]
              },
              "outlayer": {
                "main": [
                  "item.js",
                  "outlayer.js"
                ]
              }
            },
            exclude: [
                /bootstrap-sass-official/,
                /bootstrap.js/,
                /json3/,
                /es5-shim/,
                /bootstrap.css/,
                /font-awesome.css/
            ],
            ignorePath: clientPath
        }))
        .pipe(gulp.dest(`${clientPath}/`));
});

[aviadhahami]

@macdonaldr93 No wiredep on my end. I got this to work by explicitly calling the masonry.pkgd.js like this (as I saw in another post which I couldn't find it's link to put here): <script src="bower_components/masonry/dist/masonry.pkgd.js"></script> and also by re-arranging the items as you suggested.

Thanks for that :+1:

[macdonaldr93]

np! So I guess this issue is good to close @aviadhahami ?

[aviadhahami]

@macdonaldr93 Yes, for me it is solved, it this isn't a robust solution... But I guess I can close this :+1:

Happy Passover!

[macdonaldr93]

True true, I was reading further and it looks like the problem is with masonry and not this fork of it.

You too!

[marcusmotill]

Thanks @macdonaldr93 your combined suggestions fixed the issue for me