feature: lazy load monaco-editor

CSETWebNg/src/app/app-routing.module.ts

@@ -59,7 +59,6 @@ import { AuthGuard } from './guards/auth.guard';
 import { LoginComponent } from './initial/login/login.component';
 import { ResetPassComponent } from './initial/reset-pass/reset-pass.component';
 import { ResourceLibraryComponent } from './resource-library/resource-library.component';
-import { ImportComponent } from './import/import.component';
 import { AcetDetailComponent } from './assessment/results/acet-detail/acet-detail.component';
 import { AcetDashboardComponent } from './assessment/results/dashboard/acet-dashboard.component';
 import { SetListComponent } from './builder/custom-set-list/custom-set-list.component';
@@ -300,7 +299,7 @@ const appRoutes: Routes = [
       { path: 'compare-analytics/:id/:type', component: CompareAnalyticsComponent },
       { path: 'trend-analytics/:id', component: TrendAnalyticsComponent },
 
-      { path: 'importModule', component: ImportComponent },
+      { path: 'importModule', loadChildren: () => import('./import-routing.module').then(m => m.ImportRoutingModule) },
 
       { path: 'module-content-launch', component: ModuleContentLaunchComponent },
 

CSETWebNg/src/app/app.module.ts

@@ -184,7 +184,6 @@ import { LinebreakPlaintextPipe } from './helpers/linebreakplain.pipe';
 import { NullishCoalescePipe } from './helpers/nullish-coalesce.pipe';
 import { CompletionCountPipe } from './helpers/completion-count.pipe';
 import { LocalizeDatePipe } from './helpers/date-localize.pipe';
-import { ImportComponent } from './import/import.component';
 import { InitialComponent } from './initial/initial.component';
 import { MyAssessmentsComponent } from './initial/my-assessments/my-assessments.component';
 import { LoginComponent } from './initial/login/login.component';
@@ -205,7 +204,6 @@ import { NavigationService } from './services/navigation/navigation.service';
 import { QuestionsService } from './services/questions.service';
 import { SalService } from './services/sal.service';
 import { StandardService } from './services/standard.service';
-import { CodeEditorModule } from '@ngstack/code-editor';
 import { SetListComponent } from './builder/custom-set-list/custom-set-list.component';
 import { SetBuilderService } from './services/set-builder.service';
 import { CustomSetComponent } from './builder/set-detail/set-detail.component';
@@ -690,6 +688,8 @@ import { RolesChangedComponent } from './dialogs/roles-changed/roles-changed.com
 import { AnalyticsResultsComponent } from './assessment/results/analytics-results/analytics-results.component';
 import { firstValueFrom } from 'rxjs';
 import { UpgradeComponent } from './assessment/upgrade/upgrade.component';
+import { CodeEditorModule } from '@ngstack/code-editor';
+import { ImportComponent } from './import/import.component';
 
 @NgModule({
     declarations: [
@@ -775,7 +775,6 @@ import { UpgradeComponent } from './assessment/upgrade/upgrade.component';
         AssessmentDocumentsComponent,
         InlineParameterComponent,
         GlobalParametersComponent,
-        ImportComponent,
         UploadExportComponent,
         UploadDemographicsComponent,
         KeyboardShortcutsComponent,
@@ -1231,7 +1230,8 @@ import { UpgradeComponent } from './assessment/upgrade/upgrade.component';
         QuestionsReviewedComponent,
         RolesChangedComponent,
         AnalyticsResultsComponent,
-        UpgradeComponent
+        UpgradeComponent,
+        ImportComponent
     ],
     bootstrap: [AppComponent], imports: [BrowserModule,
         BrowserAnimationsModule,
@@ -1379,6 +1379,6 @@ import { UpgradeComponent } from './assessment/upgrade/upgrade.component';
         FooterService,
         AnalyticsService,
         provideHttpClient(withInterceptorsFromDi())
-    ]
+    ],
 })
 export class AppModule { }

CSETWebNg/src/app/import-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ImportComponent } from './import/import.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: ImportComponent,
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class ImportRoutingModule { }

CSETWebNg/src/app/import/import.component.html

@@ -185,7 +185,7 @@ <h4 class="panel-title px-2 py-1" style="color:white">
                                 Warning: This will clear the code editor
                             </div>
                         </div>
-                    </div> -->
+                    </div>
                 </form>
             </div>
         </div>

CSETWebNg/src/app/import/import.component.ts

@@ -47,7 +47,7 @@ export class ImportFormData {
   templateUrl: './import.component.html',
   // eslint-disable-next-line
   host: { class: 'd-flex flex-11a w-100' },
-  standalone: false
+  standalone: false,
 })
 export class ImportComponent implements OnInit, OnDestroy {
   public uploader: FileUploader;
@@ -364,19 +364,13 @@ export class ImportComponent implements OnInit, OnDestroy {
           uri: 'http://custom/schema.xsd',
           schema: s
         });
-        this.monaco = t.monaco;
-        t.monaco.languages.registerCompletionItemProvider(
-          'xml',
-          new XmlCompletionItemProvider(t, s)
-        );
-        t.monaco.languages.registerDocumentFormattingEditProvider(
-          'xml',
-          new XmlFormattingEditProvider(XmlFormatterFactory.getXmlFormatter())
-        );
-        t.monaco.languages.registerDocumentRangeFormattingEditProvider(
-          'xml',
-          new XmlFormattingEditProvider(XmlFormatterFactory.getXmlFormatter())
-        );
+
+        if (t?.monaco) {
+          this.monaco = t.monaco;
+          this.registerXmlProviders(s);
+        } else {
+          console.warn("Monaco not fully initialized");
+        }
       });
     });
 
@@ -389,7 +383,32 @@ export class ImportComponent implements OnInit, OnDestroy {
     });
   }
 
-  public showError() {
-    return this.state != 'Processing' && editor && editor.getModelMarkers({}).length || this.errors.length;
+  private registerXmlProviders(schemaContent: string) {
+    try {
+      if (this.monaco?.languages) {
+        this.monaco.languages.registerCompletionItemProvider(
+          'xml',
+          new XmlCompletionItemProvider(this.monaco, schemaContent)
+        );
+        this.monaco.languages.registerDocumentFormattingEditProvider(
+          'xml',
+          new XmlFormattingEditProvider(XmlFormatterFactory.getXmlFormatter())
+        );
+        this.monaco.languages.registerDocumentRangeFormattingEditProvider(
+          'xml',
+          new XmlFormattingEditProvider(XmlFormatterFactory.getXmlFormatter())
+        );
+      }
+    } catch (err) {
+      console.error('Failed to register XML providers:', err);
+    }
+  }
+
+  public showError(): boolean {
+    if (this.state === 'Processing') {
+      return false;
+    }
+    const markers = this.monaco && this.monaco.editor ? this.monaco.editor.getModelMarkers({}) : [];
+    return markers.length > 0 || this.errors.length > 0;
   }
 }