Muuri: Muuri + Angular5

Created on 22 Feb 2018 · 13Comments · Source: haltu/muuri

Hello All,
I´m a few days trying found the way how to get together Angular 5 with Muuri.

I have a simple working Angular5 project in the Visual Studio Code.
I installed murri+web-animation+hammerjs using npm and add the script into .angular-cli.json .
In tsconfig.json is added parameter "allowJs": true.

The markup is added to one of the component and css styles working too.
If I started the server the items overlap themselves.
It means the js doesn't start.
Obviously, I'm not understanding how to start the js in angular. Where to put the: var grid = new Muuri('.grid');
I have it in the xxx-component.ts but I got this error
https://www.dropbox.com/s/2hvl5fvq6g1s95t/error.jpg?dl=0

This is my hobby and I'm quite new in this technologies.
If someone has advice how to run this great gallery? Or sample project angular5+muuri It will be very helpful for me.

Thank you & Best regards

Jiri

question

Source

JoxBubo

👍2

Most helpful comment

I ran into this before and solved it by importing everything as an alias, and using 'default'. For your case, it would be something like this:
import * as Muuri form 'muuri';
⋮
const grid = Muuri.default('.grid');
⋮
Hope this helps!

michael-riess on 25 Jul 2018

👍3 🎉1

All 13 comments

hey, @JoxBubo. Check this -> 3rd Party Library Installation. Works fine for me, hope that would be helpful!

Hulva on 24 Mar 2018

Hello @JoxBubo

Using const Muuri = require('muuri'); instead of import {Muuri} from 'muuri'; fixed this error for me. Hope it helps you.

petajamaja on 19 Jun 2018

@petajamaja import Muuri from 'muuri'; should also work.

niklasramo on 19 Jun 2018

@niklasramo
Unfortunately I tried that as well, and it didn't work.

petajamaja on 19 Jun 2018

Oh, that's weird. I wonder why 🤔

niklasramo on 19 Jun 2018

Most likely the reason for this is because Angular uses typescript and there are no type definitions defined by default. That's why we need to use either the typeless module declaration or using require.

SuperiorJT on 20 Jun 2018

👍2

You can try with typescript's allowSyntheticDefaultImports in your tsconfig.json.

nico1510 on 20 Jun 2018

@JoxBubo Were you able to fix this? I'm having the same issue :thinking:

truccomarcos on 5 Jul 2018

michael-riess on 25 Jul 2018

👍3 🎉1

I continue learning angular and working on my Angulag6 simple layout
so I don't have any solution.
But the @mriess260 example is excellent, thank you.

JoxBubo on 25 Jul 2018

Try with declare var Muuri;
Hope this helps!

rlarin on 29 Aug 2018

It' too late to reply on this but check line 2 (https://www.dropbox.com/s/2hvl5fvq6g1s95t/error.jpg?dl=0), it should be "import { Muuri } from 'muuri';"