Face issue when using it in angular6

[cxddlmu]

version: 3.1.3
I am not sure whether it can be used in angular6. When i try it , i face error below

ERROR TypeError: magic_grid__WEBPACK_IMPORTED_MODULE_1__.MagicGrid is not a constructor

i think it is caused by below class definition
declare class MagicGrid { .... }
After I change it into below code, it works. Plz check. Thanks
export default class MagicGrid {

[e-oj]

Where does it say

declare class MagicGrid { .... }

I used export in the source.

[e-oj]

Also, it'll be helpful if you could provide a snippet of the code that's failing.

[cxddlmu]

1. declare class MagicGrid { .... } is from source

2. my test code attached below

component:

import { Component, OnInit } from '@angular/core';
import { MagicGrid } from "magic-grid"
@component({
selector: 'magic-grid',
templateUrl: './magic-grid.component.html'
})
export class MagicGridComponent implements OnInit {
ngOnInit() {
console.log("MagicGridComponent");
}
ngAfterViewInit(): void {
let magicGrid = new MagicGrid({
container: '.container',
animate: true,
gutter: 30,
static: true,
useMin: true,
maxColumns: 20
});
magicGrid.listen();
}
}

html:

<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>

<style> .container div { width: 280px; height: 500px; background-color: antiquewhite; display: flex; justify-content: center; align-items: center; border-radius: 8px; } .container .item1 { height: 200px; } .container .item4 { height: 800px; } .container .item6 { height: 600px; } .container .item11 { height: 400px; } </style>

[e-oj]

Change your import statement to

import MagicGrid from "magic-grid"

Let me know if it works.

[cxddlmu]

It will get error tips
[ts] Cannot use 'new' with an expression whose type lacks a call or construct signature.
Also, compiling error
myAngular-master/node_modules/magic-grid/index"' has no default export.

[e-oj]

I don't use typescript so I'm not really sure what the problem is. I'll have to look into it. You can open a PR with your fix in the time being

[e-oj]

@zakariaharti any ideas?

[e-oj]

fixed with #17. Update your magic grid version and it should work. Feel free to reopen this issue if you're still having problems.

[hk-skit]

Hi @e-oj,

It seems like the change is not released yet. I have upgraded the version but still getting the old code only. I think the change is in dev branch only. Can you please confirm and merge to master?

[e-oj]

@hk-skit Thanks for pointing that out 👍. It's now on master as well.

[hk-skit]

Thank you @e-oj You are doing a good job.