Made converters and formater stand alone

src/app/_services/route.service.ts

@@ -1,9 +1,6 @@
 import { Type } from "@angular/core";
 import { DefaultExport, Routes } from "@angular/router";
 import { Observable } from "rxjs";
-import { CJsonYamlComponent } from "../converters/c-json-yaml/c-json-yaml.component";
-import { FJsonComponent } from "../formatters/f-json/f-json.component";
-import { FSqlComponent } from "../formatters/f-sql/f-sql.component";
 
 
 export class RouteService{
@@ -30,14 +27,14 @@ export class RouteService{
         {
             name: 'Formatters',
             routes: [
-                { name: 'SQL', url: '/format/sql', component: FSqlComponent },
-                { name: 'JSON', url: '/format/json', component: FJsonComponent }
+                { name: 'SQL', url: '/format/sql', loadComponent: () => import('../formatters/f-sql/f-sql.component').then(mod => mod.FSqlComponent) },
+                { name: 'JSON', url: '/format/json', loadComponent: () => import('../formatters/f-json/f-json.component').then(mod => mod.FJsonComponent)  }
             ]
         },
         {
             name: 'Converters',
             routes: [
-                { name: 'Json To Yaml', url: '/convert/json-yaml', component: CJsonYamlComponent},
+                { name: 'Json To Yaml', url: '/convert/json-yaml', loadComponent: () => import('../converters/c-json-yaml/c-json-yaml.component').then(mod => mod.CJsonYamlComponent) },
             ]
         },
         {

src/app/app.module.ts

@@ -4,34 +4,19 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { CJsonYamlComponent } from './converters/c-json-yaml/c-json-yaml.component';
-import { ConvertViewComponent } from './converters/convert-view/convert-view.component';
-import { FJsonComponent } from './formatters/f-json/f-json.component';
-import { FSqlComponent } from './formatters/f-sql/f-sql.component';
-import { FYamlComponent } from './formatters/f-yaml/f-yaml.component';
-import { FormatViewComponent } from './formatters/format-view/format-view.component';
-import { MonacoEditorConfig } from './monaco/monaco-global-config';
 import { SideBarComponent } from './nav/side-bar/side-bar.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     SideBarComponent,
-    FSqlComponent,
-    FormatViewComponent,
-    FJsonComponent,
-    FYamlComponent,
-    CJsonYamlComponent,
-    ConvertViewComponent,  
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-    MonacoEditorModule.forRoot(new MonacoEditorConfig()),
     BrowserAnimationsModule
   ],
   bootstrap: [AppComponent]

src/app/converters/c-json-yaml/c-json-yaml.component.ts

@@ -1,12 +1,17 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { ConverterServiceBase } from '../_services/converter.service';
 import { JsonToYamlConverter } from '../_services/json-to-yaml.service';
+import { ConvertViewComponent } from '../convert-view/convert-view.component';
 
 @Component({
   selector: 'app-c-json-yaml',
   templateUrl: './c-json-yaml.component.html',
   styleUrls: ['./c-json-yaml.component.scss'],
-  providers: [{ provide: ConverterServiceBase, useClass: JsonToYamlConverter }]
+  providers: [{ provide: ConverterServiceBase, useClass: JsonToYamlConverter }],
+  standalone: true,
+  imports: [CommonModule, FormsModule, ConvertViewComponent],
 })
 export class CJsonYamlComponent {
 

src/app/converters/convert-view/convert-view.component.ts

@@ -1,12 +1,19 @@
+import { CommonModule } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MonacoEditorModule, NGX_MONACO_EDITOR_CONFIG } from 'ngx-monaco-editor-v2';
 import { from } from 'rxjs';
+import { MonacoEditorConfig } from 'src/app/monaco/monaco-global-config';
 import { MonacoConfig } from 'src/app/monaco/ng-monaco-config';
 import { ConverterServiceBase } from '../_services/converter.service';
 
 @Component({
   selector: 'app-convert-view',
   templateUrl: './convert-view.component.html',
-  styleUrls: ['./convert-view.component.scss']
+  styleUrls: ['./convert-view.component.scss'],
+  standalone: true,
+  imports: [CommonModule, FormsModule, MonacoEditorModule],
+  providers: [{ provide: NGX_MONACO_EDITOR_CONFIG, useClass: MonacoEditorConfig }]
 })
 export class ConvertViewComponent {
 

src/app/formatters/f-json/f-json.component.ts

@@ -1,12 +1,17 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { JsonFormatProvider } from '../_services/json-format.service';
 import { FormatViewService } from '../_services/sql-format.service';
+import { FormatViewComponent } from '../format-view/format-view.component';
 
 @Component({
   selector: 'app-f-json',
   templateUrl: './f-json.component.html',
   styleUrls: ['./f-json.component.scss'],
-  providers: [{ provide: FormatViewService, useClass: JsonFormatProvider }]
+  providers: [{ provide: FormatViewService, useClass: JsonFormatProvider }],
+  standalone: true,
+  imports: [CommonModule, FormsModule, FormatViewComponent],
 })
 export class FJsonComponent {
 

src/app/formatters/f-sql/f-sql.component.ts

@@ -1,11 +1,16 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { FormatViewService, SqlFormatProvider } from '../_services/sql-format.service';
+import { FormatViewComponent } from '../format-view/format-view.component';
 
 @Component({
   selector: 'app-f-sql',
   templateUrl: './f-sql.component.html',
   styleUrls: ['./f-sql.component.scss'],
-  providers: [{ provide: FormatViewService, useClass: SqlFormatProvider }]
+  providers: [{ provide: FormatViewService, useClass: SqlFormatProvider }],
+  standalone: true,
+  imports: [CommonModule, FormsModule, FormatViewComponent],
 })
 export class FSqlComponent {
 

src/app/formatters/f-yaml/f-yaml.component.ts

@@ -1,9 +1,14 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FormatViewComponent } from '../format-view/format-view.component';
 
 @Component({
   selector: 'app-f-yaml',
   templateUrl: './f-yaml.component.html',
-  styleUrls: ['./f-yaml.component.scss']
+  styleUrls: ['./f-yaml.component.scss'],
+  standalone: true,
+  imports: [CommonModule, FormsModule, FormatViewComponent],
 })
 export class FYamlComponent {
 

src/app/formatters/format-view/format-view.component.ts

@@ -1,12 +1,18 @@
+import { CommonModule } from '@angular/common';
 import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MonacoEditorModule, NGX_MONACO_EDITOR_CONFIG } from 'ngx-monaco-editor-v2';
 import { from } from 'rxjs';
+import { MonacoEditorConfig } from 'src/app/monaco/monaco-global-config';
 import { MonacoConfig } from '../../monaco/ng-monaco-config';
 import { FormatViewService } from '../_services/sql-format.service';
-
 @Component({
   selector: 'app-format-view',
   templateUrl: './format-view.component.html',
-  styleUrls: ['./format-view.component.scss']
+  styleUrls: ['./format-view.component.scss'],
+  standalone: true,
+  imports: [CommonModule, FormsModule, MonacoEditorModule],
+  providers: [{ provide: NGX_MONACO_EDITOR_CONFIG, useClass: MonacoEditorConfig }]
 })
 export class FormatViewComponent {
   inputOptions: MonacoConfig;