ERROR Al importar como módulo Angular 6
@nternouski supongo que necesitabas incluir el script de gjs-preset-newsletter en la sección de scripts de tu build en angular.json. Cualquier plugin que quieras usar debe incluirse aquí o la versión de Angular no sabrá que debe incluirlos.
Lee la respuesta completa abajo ↓Pregunta
en versión: "grapesjs": "^0.14.61", "grapesjs-preset-newsletter": "^0.2.20",
Importo el script como:
importar uvas de "uvasjs";
importar uvapesjsPresetBoletín de "grapesjs-preset-newsletter";
y el contexto es el código:
ngOnInit() {
this.editor = grapesjs.init({
contenedor: "#gjs",
componentes: '<div class="txt-red">¡Hola mundo!</div>`,
estilo: ".txt-rojo{color: rojo}",
Plugins: [
"GJS-Preset-Newsletter"
grapesjsPresetNewsletter
],
pluginsOpts: {
"gjs-preset-newsletter": {
modalTitleImport: "Importar Template",
importPlaceholder: "Inserte aquí el HTML y CSS inline",
inlineCss: cierto,
},
}
});
}
Y solo en la compilación, la consola imprime:
main.011758c7e31c6528fe91.js:1 ERROR TipoError: i no es una función
a 15.aacc28347512f1c58ef9.js:1
a 15.aacc28347512f1c58ef9.js:1
a 15.aacc28347512f1c58ef9.js:1
en Array.forEach (<anonymous>)
en Object.init (15.aacc28347512f1c58ef9.js:1)
en e.ngOnInit (15.aacc28347512f1c58ef9.js:1)
a las main.011758c7e31c6528fe91.js:1
a las main.011758c7e31c6528fe91.js:1
AT BO (main.011758c7e31c6528fe91.js:1)
En QO (main.011758c7e31c6528fe91.js:1)
Por favor, ayudadme. Gracias por vuestro tiempo.
Respuestas (3)
@nternouski supongo que necesitabas incluir el script de gjs-preset-newsletter en la sección de scripts de tu build en angular.json.
"guiones": [
"./node_modules/grapesjs/dist/grapes.min.js",
"./node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js",
"./node_modules/grapesjs-bloques-bootstrap/dist/grapesjs-blocks-bootstrap4.min.js"
]
Cualquier plugin que quieras usar debe incluirse aquí o la versión de Angular no sabrá que debe incluirlos.
Si no lo añades globalmente, tendrás que registrar manualmente el plugin en grapesjs.
'''Manuscrito mecanografiado importar uvas de "uvasjs"; importar uvapesjsPresetBoletín de "grapesjs-preset-newsletter";
grapesjs.plugins.add('grapesjs-preset-newsletter', grapesjsPresetNewsletter);
Luego, asegúrate de usar el ID que configuraste y no el nombre de la variable al inicializar.
'''Manuscrito mecanografiado
ngOnInit() {
this.editor = grapesjs.init({
contenedor: "#gjs",
Plugins: [ "GJS-Preset-Newsletter" ]
});
}
Hola @nternouski, desafortunadamente ese plugin todavía usa la exportación antigua, así que tienes que usarlo así: '''js importar uvas de "uvasjs"; importación "grapesjs-preset-newsletter"; ... grapesjs.init({ ... Plugins: ["GJS-preset-newsletter"], ... })
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #519
No hay bloques por defecto
Uso de este código Tengo un editor pero no hay bloqueos. Tampoco veo los iconos del tamaño de pantalla, pero sí hay otros iconos. Como pued...
Issue #1505
añadir filas y secciones que no funcionan
Estoy integrando Grapejs con Angular6. Pero no funciona significa que no aparece en bloques Estoy usando el siguiente código
Issue #3071
BUG: se activó el oyente de actualización en la carga inicial
¡Hola! He encontrado un error raro con el oyente de actualizaciones. Se activa en la carga inicial si el código html tiene <img> etiqueta c...
Issue #2929
Sigue obteniendo CORS cuando se usa un endpoint falso para almacenamiento remoto
¡Hola a todos! Estoy usando grapesjs con vuejs y estoy teniendo problemas con el CORS. Creé mi endpoint falso con Beeceptor y tengo el códi...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery
We’ve rolled out a new set of GrapesJS marketplace updates across GJS Market, focused on improving how creators distribute products
Tutorial
Integrating GrapesJS into a Vue 3 App — Complete Guide for 2026
Build a Vue 3 landing page builder with GrapesJS and Vite. Custom blocks, composables, remote storage, TypeScript & production tips. Updated for 2026.
Tutorial
How to Build a Drag-and-Drop Page Builder in Angular Using GrapesJS (Step-by-Step Guide + Code)
Build a visual drag-and-drop page builder in Angular with GrapesJS. Learn setup, plugins, and backend saving in this full code guide.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.