Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

BUG When import as module Angular 6

See original GitHub issue

in Version: “grapesjs”: “^0.14.61”, “grapesjs-preset-newsletter”: “^0.2.20”,

i import the script as:

import grapesjs from "grapesjs";
import grapesjsPresetNewsletter from "grapesjs-preset-newsletter";

and the context is the code:

 ngOnInit() {
	this.editor = grapesjs.init({
		container: "#gjs",
		components: `<div class="txt-red">Hello world!</div>`,
		style: ".txt-red{color: red}",
		plugins: [
			// "gjs-preset-newsletter"
			grapesjsPresetNewsletter
		],
		pluginsOpts: {
			"gjs-preset-newsletter": {
				modalTitleImport: "Importar Template",
				importPlaceholder: "Inserte aquí el HTML y CSS inline",
				inlineCss: true,
			},
		}
	});
}

And only on build, the console print:

main.011758c7e31c6528fe91.js:1 ERROR TypeError: i is not a function
    at 15.aacc28347512f1c58ef9.js:1
    at 15.aacc28347512f1c58ef9.js:1
    at 15.aacc28347512f1c58ef9.js:1
    at Array.forEach (<anonymous>)
    at Object.init (15.aacc28347512f1c58ef9.js:1)
    at e.ngOnInit (15.aacc28347512f1c58ef9.js:1)
    at main.011758c7e31c6528fe91.js:1
    at main.011758c7e31c6528fe91.js:1
    at bo (main.011758c7e31c6528fe91.js:1)
    at qo (main.011758c7e31c6528fe91.js:1)

Please Help me. Thanks for your time.

Issue Analytics

State:
Created 4 years ago
Comments:10 (3 by maintainers)

Top GitHub Comments

1reaction

joshberrycommented, Aug 11, 2019

If you don’t add it globally, you’ll need to manually register the plugin with grapesjs.

import grapesjs from "grapesjs";
import grapesjsPresetNewsletter from "grapesjs-preset-newsletter";

grapesjs.plugins.add('grapesjs-preset-newsletter', grapesjsPresetNewsletter );

Then, be sure to use the ID you configured and not the variable name when initializing.

ngOnInit() {
  this.editor = grapesjs.init({
    container: "#gjs",
    plugins: [ "gjs-preset-newsletter" ]
  });
}

1reaction

joshberrycommented, Aug 10, 2019

@nternouski I’m guessing you needed to include the gjs-preset-newsletter script in the scripts section of your build in angular.json.

"scripts": [
    "./node_modules/grapesjs/dist/grapes.min.js",
    "./node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js",
    "./node_modules/grapesjs-blocks-bootstrap/dist/grapesjs-blocks-bootstrap4.min.js"
]

Any plugins you want to use need to be included here or the angular build won’t know to include them.

Top Results From Across the Web

Angular not importing a module in app.module.ts still gives ...

The error says, that app-bot-view-transfer-to-user is not registered in the corresponding auth-standalone module.

Feature modules - Angular

Feature modules import CommonModule instead of BrowserModule , which is only imported once in the root module. CommonModule only contains information for ...

Lazy-loading feature modules - Angular

To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule ... The import path is the relative path to...

NgModules - Angular

Imports other modules with the components, directives, and pipes that components in the current module need; Provides services that other application components ...

Providing dependencies in modules - Angular

You should always provide your service in the root injector unless there is a case where you want the service to be available...