refactor(VLE): Remove modules part 2

src/app/app-routing.module.ts

@@ -32,11 +32,11 @@ const routes: Routes = [
   },
   {
     path: 'forgot',
-    loadChildren: () => import('./forgot/forgot-routing.module').then((m) => m.ForgotRoutingModule)
+    loadChildren: () => import('./forgot/forgot.routes').then((m) => m.routes)
   },
   {
     path: 'help',
-    loadChildren: () => import('./help/help-routing.module').then((m) => m.HelpRoutingModule)
+    loadChildren: () => import('./help/help.routes').then((m) => m.routes)
   },
   {
     path: 'join',

src/app/classroom-monitor/milestones/milestones.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, Injector } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
 import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { MilestoneDetailsDialogComponent } from '../../../assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-details-dialog/milestone-details-dialog.component';
@@ -12,6 +13,8 @@ import { MatCard, MatCardContent } from '@angular/material/card';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { NgClass } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
+import { MilestoneReportDataComponent } from '../../teacher/milestone/milestone-report-data/milestone-report-data.component';
+import { MilestoneReportGraphComponent } from '../../teacher/milestone/milestone-report-graph/milestone-report-graph.component';
 
 @Component({
   imports: [MatCard, MatCardContent, MatProgressSpinner, NgClass, MatIcon],
@@ -27,9 +30,23 @@ export class MilestonesComponent {
     private achievementService: AchievementService,
     private annotationService: AnnotationService,
     private milestoneService: MilestoneService,
+    private injector: Injector,
     private dialog: MatDialog,
     private dataService: TeacherDataService
-  ) {}
+  ) {
+    if (!customElements.get('milestone-report-data')) {
+      customElements.define(
+        'milestone-report-data',
+        createCustomElement(MilestoneReportDataComponent, { injector: this.injector })
+      );
+    }
+    if (!customElements.get('milestone-report-graph')) {
+      customElements.define(
+        'milestone-report-graph',
+        createCustomElement(MilestoneReportGraphComponent, { injector: this.injector })
+      );
+    }
+  }
 
   ngOnInit() {
     this.loadProjectMilestones();

src/app/forgot/forgot-routing.module.ts → src/app/forgot/forgot.routes.ts

@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 import { ForgotComponent } from './forgot.component';
 import { ForgotHomeComponent } from './forgot-home/forgot-home.component';
 import { ForgotStudentComponent } from './student/forgot-student/forgot-student.component';
@@ -15,7 +14,7 @@ import { ForgotTeacherPasswordVerifyComponent } from './teacher/forgot-teacher-p
 import { ForgotTeacherPasswordChangeComponent } from './teacher/forgot-teacher-password-change/forgot-teacher-password-change.component';
 import { ForgotUserPasswordCompleteComponent } from './forgot-user-password-complete/forgot-user-password-complete.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: '',
     component: ForgotComponent,
@@ -37,9 +36,3 @@ const routes: Routes = [
     ]
   }
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ForgotRoutingModule {}

src/app/help/help-routing.module.ts → src/app/help/help.routes.ts

@@ -1,12 +1,11 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { HelpComponent } from './help.component';
 import { HelpHomeComponent } from './help-home/help-home.component';
 import { GettingStartedComponent } from './faq/getting-started/getting-started.component';
 import { TeacherFaqComponent } from './faq/teacher-faq/teacher-faq.component';
 import { StudentFaqComponent } from './faq/student-faq/student-faq.component';
 
-const helpRoutes: Routes = [
+export const routes: Routes = [
   {
     path: '',
     component: HelpComponent,
@@ -18,9 +17,3 @@ const helpRoutes: Routes = [
     ]
   }
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(helpRoutes)],
-  exports: [RouterModule]
-})
-export class HelpRoutingModule {}

src/app/teacher/authoring-routing.module.ts → src/app/teacher/authoring.routes.ts

@@ -1,10 +1,9 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { AuthoringConfigResolver } from './authoring.config.resolver';
 import { AuthoringProjectResolver } from './authoring.project.resolver';
 import { RecoveryAuthoringProjectResolver } from './recovery-authoring-project.resolver';
 
-const routes: Routes = [
+export const authoringRoutes: Routes = [
   {
     path: '',
     loadComponent: () =>
@@ -53,15 +52,15 @@ const routes: Routes = [
           {
             path: 'add-lesson',
             loadChildren: () =>
-              import('../../assets/wise5/authoringTool/addLesson/add-lesson-routing.module').then(
-                (m) => m.AddLessonRoutingModule
+              import('../../assets/wise5/authoringTool/addLesson/add-lesson.routes').then(
+                (m) => m.routes
               )
           },
           {
             path: 'add-node',
             loadChildren: () =>
-              import('../../assets/wise5/authoringTool/addNode/add-node-routing.module').then(
-                (m) => m.AddNodeRoutingModule
+              import('../../assets/wise5/authoringTool/addNode/add-node.routes').then(
+                (m) => m.routes
               )
           },
           {
@@ -123,8 +122,8 @@ const routes: Routes = [
           {
             path: 'node/:nodeId',
             loadChildren: () =>
-              import('../../assets/wise5/authoringTool/node/node-authoring-routing.module').then(
-                (m) => m.NodeAuthoringRoutingModule
+              import('../../assets/wise5/authoringTool/node/node-authoring.routes').then(
+                (m) => m.routes
               )
           },
           {
@@ -139,9 +138,3 @@ const routes: Routes = [
     ]
   }
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class AuthoringRoutingModule {}

src/app/teacher/teacher-authoring.module.ts

@@ -26,7 +26,7 @@ import { PeerGroupService } from '../../assets/wise5/services/peerGroupService';
 import { NodeService } from '../../assets/wise5/services/nodeService';
 import { TeacherNodeService } from '../../assets/wise5/services/teacherNodeService';
 import { MilestoneReportService } from '../../assets/wise5/services/milestoneReportService';
-import { AuthoringRoutingModule } from './authoring-routing.module';
+import { authoringRoutes } from './authoring.routes';
 import { ComponentInfoService } from '../../assets/wise5/services/componentInfoService';
 import { CreateBranchService } from '../../assets/wise5/services/createBranchService';
 import { EditBranchService } from '../../assets/wise5/services/editBranchService';
@@ -42,10 +42,11 @@ import { RegisterProjectService } from '../../assets/wise5/services/registerProj
 import { StudentTeacherCommonServicesModule } from '../student-teacher-common-services.module';
 import { EditComponentAdvancedComponent } from '../authoring-tool/edit-component-advanced/edit-component-advanced.component';
 import { PeerGroupingAuthoringService } from '../../assets/wise5/services/peerGroupingAuthoringService';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   imports: [
-    AuthoringRoutingModule,
+    RouterModule.forChild(authoringRoutes),
     EditComponentAdvancedComponent, // TODO: refactor. currently needed for peer grouping authoring dialog to work
     StudentTeacherCommonServicesModule
   ],

src/app/teacher/teacher-tools.module.ts

@@ -15,7 +15,6 @@ import { ImportComponentService } from '../../assets/wise5/services/importCompon
 import { InsertComponentService } from '../../assets/wise5/services/insertComponentService';
 import { InsertNodesService } from '../../assets/wise5/services/insertNodesService';
 import { MoveNodesService } from '../../assets/wise5/services/moveNodesService';
-import { ClassroomMonitorModule } from '../teacher/classroom-monitor.module';
 import { UpdateWorkgroupService } from '../services/updateWorkgroupService';
 import { GetWorkgroupService } from '../services/getWorkgroupService';
 import { WorkgroupService } from '../services/workgroup.service';
@@ -27,20 +26,28 @@ import { PeerGroupService } from '../../assets/wise5/services/peerGroupService';
 import { NodeService } from '../../assets/wise5/services/nodeService';
 import { TeacherNodeService } from '../../assets/wise5/services/teacherNodeService';
 import { MilestoneReportService } from '../../assets/wise5/services/milestoneReportService';
-import { RouterModule } from '@angular/router';
-import { TeacherToolsRoutingModule } from './teacher-tools-routing.module';
+import { teacherToolsRoutes } from './teacher-tools.routes';
 import { TeacherPauseScreenService } from '../../assets/wise5/services/teacherPauseScreenService';
 import { RunStatusService } from '../../assets/wise5/services/runStatusService';
+import { GradingNodeService } from '../../assets/wise5/services/gradingNodeService';
+import { ComponentStudentModule } from '../../assets/wise5/components/component/component-student.module';
+import { StudentTeacherCommonServicesModule } from '../student-teacher-common-services.module';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
-  imports: [ClassroomMonitorModule, RouterModule, TeacherToolsRoutingModule],
+  imports: [
+    ComponentStudentModule,
+    StudentTeacherCommonServicesModule,
+    RouterModule.forChild(teacherToolsRoutes)
+  ],
   providers: [
     ClassroomStatusService,
     CopyNodesService,
     CopyProjectService,
     DataExportService,
     { provide: DataService, useExisting: TeacherDataService },
     GetWorkgroupService,
+    GradingNodeService,
     DeleteNodeService,
     ImportComponentService,
     InsertComponentService,

src/app/teacher/teacher-tools-routing.module.ts → src/app/teacher/teacher-tools.routes.ts

@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { ClassroomMonitorComponent } from '../../assets/wise5/classroomMonitor/classroom-monitor.component';
 import { TeacherToolsResolver } from './teacher-tools.resolver';
 import { NodeProgressViewComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/nodeProgress/node-progress-view/node-progress-view.component';
@@ -18,7 +17,7 @@ import { ExportOneWorkgroupPerRowComponent } from '../../assets/wise5/classroomM
 import { ExportStudentWorkComponent } from '../../assets/wise5/classroomMonitor/dataExport/export-student-work/export-student-work.component';
 import { NodeGradingComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component';
 
-const routes: Routes = [
+export const teacherToolsRoutes: Routes = [
   {
     path: 'unit/:unitId',
     component: ClassroomMonitorComponent,
@@ -35,15 +34,9 @@ const routes: Routes = [
       { path: 'manage-students', component: ManageStudentsComponent },
       { path: 'milestones', component: MilestonesComponent },
       { path: 'group/:nodeId', component: NodeProgressViewComponent },
-      {
-        path: 'node/:nodeId',
-        component: NodeGradingComponent
-      },
+      { path: 'node/:nodeId', component: NodeGradingComponent },
       { path: 'notebook', component: NotebookGradingComponent },
-      {
-        path: 'team',
-        component: StudentProgressComponent
-      },
+      { path: 'team', component: StudentProgressComponent },
       {
         path: 'team/:workgroupId',
         component: StudentGradingComponent,
@@ -52,9 +45,3 @@ const routes: Routes = [
     ]
   }
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class TeacherToolsRoutingModule {}

src/assets/wise5/authoringTool/add-lesson-button/add-lesson-button.component.html

@@ -25,7 +25,7 @@
     </button>
     <mat-menu #lessonMenu="matMenu">
       <button mat-menu-item (click)="addFirstLesson()">
-        <mat-icon class="rotate-180 flip-vertical">subdirectory_arrow_left</mat-icon
+        <mat-icon class="flip-vertical">subdirectory_arrow_left</mat-icon
         ><span i18n>Add lesson before</span>
       </button>
       <button mat-menu-item (click)="goToAddLessonView(lessonId)">