NgxWebpageEditorComponent is not standalone and cannot be imported directly.

[Skytech61]

Hi, I have a problem with ngw-grapesjs.

I'm trying to use the grapesjs builder but I can't get the page maked by the builder. I tried with template but nothing works. I don't know what I can do. If you have any idea, please let me know.

/* eslint-disable @typescript-eslint/no-explicit-any */
import {
  AfterViewInit,
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  OnInit,
  ViewChild,
} from '@angular/core';
import { SidebarComponent } from '../../../../components/sidebar/sidebar.component';
import { NgxGrapesjsModule, NgxWebpageEditorComponent } from 'ngx-grapesjs';
import { PageService } from '../../../../services/page/page.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Page } from '../../../../interfaces/page';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-page-edit',
  standalone: true,
  imports: [
    SidebarComponent,
    NgxGrapesjsModule,
    FormsModule,
    NgxWebpageEditorComponent,
  ],
  templateUrl: './page-edit.component.html',
  styleUrl: './page-edit.component.css',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class PageEditComponent implements OnInit, AfterViewInit {
  @ViewChild('gjsEditor') gjsEditor!: NgxGrapesjsModule;

  template!: string;

  pageId!: number;
  page: Page = {
    id: 0,
    title: '',
    content: '',
    isPublished: false,
    created: new Date(),
    gjsProject: JSON.parse('{}'),
  };

  constructor(
    private pageService: PageService,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.setIdFromUrl();
    this.getPage();

    console.log(this.gjsEditor);
  }

  ngAfterViewInit(): void {
    console.log(this.gjsEditor);
  }

  // Get ID from URL
  setIdFromUrl(): void {
    this.route.params.subscribe({
      next: params => {
        this.pageId = params['id'];
      },
      error: err => {
        console.error(err);
      },
    });
  }

  getPage(): void {
    this.pageService.getPage(this.pageId).subscribe({
      next: page => {
        this.page = page;
      },
      error: err => {
        console.error(err);
      },
    });
  }

  save(): void {
    console.log(this.gjsEditor);

    // this.saveToDatabase(this.page.content);
  }

  saveToDatabase(template: string): void {
    const page = {
      id: this.pageId,
      title: this.page.title,
      content: template,
      isPublished: this.page.isPublished,
      created: new Date(),
      gjsProject: {},
    } as Page;

    this.pageService.putPage(page).subscribe({
      next: () => {
        this.router.navigate(['/dashboard/page/list']);
      },
      error: err => {
        console.error(err);
      },
    });
  }
}

The error I have : The component 'NgxWebpageEditorComponent' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule.(-992011)

My html :

<ngx-grapes-webpage-editor #gjsEditor [template]="template"></ngx-grapes-webpage-editor>

Versions :

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 17.1.2
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

[bampakoa]

You must remove NgxWebpageEditorComponent from the imports of the @Component decorator.

[Skytech61]

You must remove NgxWebpageEditorComponent from the imports of the @Component decorator.

Hi, thanks for your message. I know that I have to remove it but otherwise how can I get the content of the page builder ? I have to use the grapesjs.init() but when I use it, that break the page builder. I don't know how I can access to all methods of the library. I can only use html tags "<ngx-grapes-webpage-editor></ngx-grapes-webpage-editor>".