refactor(Application): Remove modules

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/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts

@@ -15,11 +15,11 @@ import { Component as WISEComponent } from '../../../assets/wise5/common/Compone
 import { components } from '../../../assets/wise5/components/Components';
 
 @Component({
-  templateUrl: './edit-component-advanced.component.html',
+  imports: [MatDivider, MatDialogModule, MatButtonModule],
   styles: [
     '.mat-divider { margin: 0 -16px; } .mat-mdc-dialog-content { padding-top: 10px !important; padding-bottom: 10px !important; }'
   ],
-  imports: [MatDivider, MatDialogModule, MatButtonModule]
+  templateUrl: './edit-component-advanced.component.html'
 })
 export class EditComponentAdvancedComponent {
   @ViewChild('component') private componentElementRef: ElementRef;

src/app/classroom-monitor/alert-status-corner/alert-status-corner.component.ts

@@ -3,10 +3,10 @@ import { Component, Input } from '@angular/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
-    imports: [CommonModule, MatTooltipModule],
-    selector: 'alert-status-corner',
-    styleUrl: 'alert-status-corner.scss',
-    templateUrl: 'alert-status-corner.component.html'
+  imports: [CommonModule, MatTooltipModule],
+  selector: 'alert-status-corner',
+  styleUrl: 'alert-status-corner.scss',
+  templateUrl: 'alert-status-corner.component.html'
 })
 export class AlertStatusCornerComponent {
   @Input() hasNewAlert: boolean;

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/classroom-monitor/status-icon/status-icon.component.ts

@@ -3,9 +3,18 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
-    imports: [MatIconModule, MatTooltipModule],
-    selector: 'status-icon',
-    templateUrl: 'status-icon.component.html'
+  imports: [MatIconModule, MatTooltipModule],
+  selector: 'status-icon',
+  template: `
+    <mat-icon
+      class="{{ class }}"
+      tabindex="0"
+      matTooltip="{{ tooltip }}"
+      matTooltipPosition="above"
+    >
+      {{ name }}
+    </mat-icon>
+  `
 })
 export class StatusIconComponent {
   @Input() class: string;

src/app/forgot/forgot-user-password-complete/forgot-user-password-complete.component.ts

@@ -4,8 +4,8 @@ import { MatButton } from '@angular/material/button';
 import { MatCard, MatCardContent } from '@angular/material/card';
 
 @Component({
-    templateUrl: './forgot-user-password-complete.component.html',
-    imports: [MatCard, MatCardContent, MatButton]
+  imports: [MatCard, MatCardContent, MatButton],
+  templateUrl: './forgot-user-password-complete.component.html'
 })
 export class ForgotUserPasswordCompleteComponent {
   @Input() username: string;

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.component.ts

@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
-    imports: [RouterModule],
-    selector: 'app-help',
-    styleUrl: './help.component.scss',
-    templateUrl: './help.component.html'
+  imports: [RouterModule],
+  selector: 'app-help',
+  styleUrl: './help.component.scss',
+  templateUrl: './help.component.html'
 })
 export class HelpComponent {}

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/modules/header/header-signin/header-signin.component.ts

@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
-    selector: 'app-header-signin',
-    imports: [RouterModule],
-    templateUrl: './header-signin.component.html',
-    styleUrls: ['./header-signin.component.scss']
+  imports: [RouterModule],
+  selector: 'app-header-signin',
+  styleUrl: './header-signin.component.scss',
+  templateUrl: './header-signin.component.html'
 })
 export class HeaderSigninComponent {}

src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.ts

@@ -5,11 +5,11 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 type SelectAllItemsStatus = 'none' | 'some' | 'all';
 
 @Component({
-    imports: [MatCheckboxModule, MatTooltipModule],
-    providers: [{ provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } }],
-    selector: 'select-all-items-checkbox',
-    styleUrl: 'select-all-items-checkbox.component.scss',
-    templateUrl: './select-all-items-checkbox.component.html'
+  imports: [MatCheckboxModule, MatTooltipModule],
+  providers: [{ provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } }],
+  selector: 'select-all-items-checkbox',
+  styleUrl: 'select-all-items-checkbox.component.scss',
+  templateUrl: './select-all-items-checkbox.component.html'
 })
 export class SelectAllItemsCheckboxComponent {
   @Output() allSelectedEvent: EventEmitter<void> = new EventEmitter<void>();

src/app/modules/shared/blurb/blurb.component.ts

@@ -2,10 +2,10 @@ import { CommonModule } from '@angular/common';
 import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
 
 @Component({
-    imports: [CommonModule],
-    selector: 'app-blurb',
-    styleUrl: './blurb.component.scss',
-    templateUrl: './blurb.component.html'
+  imports: [CommonModule],
+  selector: 'app-blurb',
+  styleUrl: './blurb.component.scss',
+  templateUrl: './blurb.component.html'
 })
 export class BlurbComponent {
   @Input() content: string;

src/app/modules/shared/search-bar/search-bar.component.ts

@@ -16,18 +16,18 @@ import { MatInputModule } from '@angular/material/input';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 @Component({
-    encapsulation: ViewEncapsulation.None,
-    imports: [
-        CommonModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        ReactiveFormsModule
-    ],
-    selector: 'app-search-bar',
-    styleUrl: './search-bar.component.scss',
-    templateUrl: './search-bar.component.html'
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  selector: 'app-search-bar',
+  styleUrl: './search-bar.component.scss',
+  templateUrl: './search-bar.component.html'
 })
 export class SearchBarComponent implements OnInit {
   @Output('update') change: EventEmitter<string> = new EventEmitter<string>();

src/app/notebook/notebook-launcher/notebook-launcher.component.ts

@@ -7,16 +7,19 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
-    imports: [MatButtonModule, MatIconModule, MatTooltipModule],
-    selector: 'notebook-launcher',
-    templateUrl: 'notebook-launcher.component.html'
+  imports: [MatButtonModule, MatIconModule, MatTooltipModule],
+  selector: 'notebook-launcher',
+  templateUrl: 'notebook-launcher.component.html'
 })
 export class NotebookLauncherComponent {
   protected label: string = '';
   @Input() notebookConfig: any;
   private subscription: Subscription = new Subscription();
 
-  constructor(private notebookService: NotebookService, private projectService: ProjectService) {}
+  constructor(
+    private notebookService: NotebookService,
+    private projectService: ProjectService
+  ) {}
 
   ngOnInit(): void {
     this.setLabel();

src/app/student-teacher-common-services.module.ts

@@ -37,7 +37,6 @@ import { OutsideURLService } from '../assets/wise5/components/outsideURL/outside
 import { PathService } from '../assets/wise5/services/pathService';
 import { PeerChatService } from '../assets/wise5/components/peerChat/peerChatService';
 import { PeerGroupService } from '../assets/wise5/services/peerGroupService';
-import { CRaterPingService } from '../assets/wise5/services/cRaterPingService';
 import { ProjectLibraryService } from '../assets/wise5/services/projectLibraryService';
 import { ProjectService } from '../assets/wise5/services/projectService';
 import { SessionService } from '../assets/wise5/services/sessionService';
@@ -101,7 +100,6 @@ import { WiseLinkService } from './services/wiseLinkService';
     PathService,
     PeerChatService,
     PeerGroupService,
-    CRaterPingService,
     ProjectLibraryService,
     { provide: ProjectService, useExisting: VLEProjectService },
     SessionService,