Migrate to Standalone API

Author: bampakoa

projects/demo-editor/src/app/app.component.ts

@@ -1,9 +1,21 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterOutlet } from '@angular/router';
+import { NgxNewsletterEditorComponent, NgxWebpageEditorComponent } from 'ngx-grapesjs';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterOutlet,
+    NgxWebpageEditorComponent,
+    NgxNewsletterEditorComponent
+  ],
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrl: './app.component.css'
 })
 export class AppComponent {
   editorMode = '';

projects/demo-editor/src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};

projects/demo-editor/src/app/app.module.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

projects/demo-editor/src/app/app.routes.ts

@@ -1,7 +1,6 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
-
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

projects/demo-editor/src/favicon.ico

@@ -8,7 +8,7 @@ describe('NgxNewsletterEditorComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [NgxNewsletterEditorComponent]
+      imports: [NgxNewsletterEditorComponent]
     });
     fixture = TestBed.createComponent(NgxNewsletterEditorComponent);
     component = fixture.componentInstance;

projects/demo-editor/src/main.ts

@@ -7,7 +7,8 @@ import { NgxEditorComponent } from '../editor.component';
 
 @Component({
   selector: 'ngx-grapes-newsletter-editor',
-  template: '<div id="gjs"></div>'
+  template: '<div id="gjs"></div>',
+  standalone: true
 })
 export class NgxNewsletterEditorComponent extends NgxEditorComponent implements OnInit {
 

projects/ngx-grapesjs/src/lib/newsletter-editor/ngx-newsletter-editor.component.spec.ts

@@ -5,7 +5,8 @@ import { Config } from '../editor.model';
 
 @Component({
   selector: 'ngx-grapes-webpage-editor',
-  template: '<div id="gjs"></div>'
+  template: '<div id="gjs"></div>',
+  standalone: true
 })
 
 export class NgxWebpageEditorComponent extends NgxEditorComponent implements OnInit {