1

Tengo instalado el paquete de masonry y sus archivos están en node_modules/masonry_layout. También tengo instalado jQuery. Necesito utilizar Masonry en un componente.

En mi componente tengo lo siguiente:

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';window["$"] = $; window["jQuery"] = $;
@Component({
  selector: 'app-galeria',
  templateUrl: './galeria.component.html',
  styleUrls: ['./galeria.component.min.css']
})
export class GaleriaComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    $(document).ready(function() {
      $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',
        percentPosition: true
      });
    });
  }
}

He intentado importar Masonry al componente de las siguientes maneras:

import * as _ from ‘masonry-layout’;
import * from ‘masonry-layout’;
import 'node_modules/masonry-layout/dist/masonry.min.js';

También intenté guardar el masonry.min.js en mi directorio de assets y cargarlo directamente en index.html como un script cualquiera.

<script src="node_modules/masonry-layout/dist/masonry.min.js"></script>

Nada de esto ha funcionado. La consola me dice que la función masonry() no es una propiedad de jQuery.

¿Saben cómo cargar correctamente este tipo de archivos a los componentes?

1
  • te da algun error en la consola? en que orden cargas los scripts?
    – Klaimmore
    Commented el 12 abr. 2018 a las 18:19

2 respuestas 2

1

Según la documentación de Masonry puedes usar el plugin sin jQuery lo primero que debes hacer es instalar masonry desde npm

npm install masonry-layout --save

y para usar el plugin solo necesitas hacer el import de esta manera

import  Masonry  from 'masonry-layout';

en el componente que desees usar, te pongo un ejemplo ya funcionando https://stackblitz.com/edit/angular-dz1sva

5
  • Muchas gracias por tu respuesta. En el demo que enlazas puedo hacerlo funcionar perfectamente a como lo necesito (Utilizando imágenes), pero en mi proyecto me tira el siguiente error. masonry_layout_1.default is not a constructor esto utilizando el método del new Masonry. Utilizando el método de jQuery me sale $(...).masonry is not a function. Intenté con declare var masonry: any; pero sigue el error.
    – akko
    Commented el 12 abr. 2018 a las 22:06
  • he creado un proyecto en local y he probado el ejemplo que te proporcione y me funciona correctamente, verifica que tengas instalada la librería, puedes probar desinstalando la librería y volver a instalarla
    – oscar_sls
    Commented el 12 abr. 2018 a las 22:37
  • ¿Podrías decirme qué paquetes de node instalaste? Yo tengo instalado jquery y masonry-layout --save
    – akko
    Commented el 12 abr. 2018 a las 22:55
  • cree un nuevo proyecto desde 0 con y solo instale masonry, de la manera como lo puse en mi respuesta
    – oscar_sls
    Commented el 12 abr. 2018 a las 22:57
  • Igual acabo de crear un proyecto desde 0 pero sigue igual.
    – akko
    Commented el 13 abr. 2018 a las 0:43
0

Lo que tienes que hacer es lo siguiente:

1. En tu archivo index.html debes tener declarado tu archivo jquery.min: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2. Instalar con npm install masonry-layout --save

3. Abrir el archivo .angular-cli.json (se encuentra en la raiz de tu proyecto)

4. Ir a la parte "scripts" "scripts": [ "../node_modules/masonry-layout/dist/masonry.pkgd.min.js" ], 5. En tu componente debe quedar de la siguiente manera

import { Component, OnInit } from '@angular/core';
declare var $:any;
declare var Masonry: any;
@Component({
  selector: 'app-galeria',
  templateUrl: './galeria.component.html',
  styleUrls: ['./galeria.component.min.css']
})
export class GaleriaComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    $(document).ready(function() {
      $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',
        percentPosition: true
      });
    });

    // o puede hacerlo de esta manera
    /*
		var elem = document.querySelector('.grid');
		var msnry = new Masonry( elem, {
		  // options
		  itemSelector: '.grid-item',
		  columnWidth: 200
		})
    */
  }
}

6. Si sigues con problemas, puedes revisar este repositorio de masonry compatible con angular, el github es: Click aquí

1
  • Gracias por tu respuesta. El método que pones no me funciona, me sale $(...).masonry is not a function en la consola. Chequé el repositorio de github pero tampoco funcionaba en mi proyecto.
    – akko
    Commented el 12 abr. 2018 a las 22:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.