refactor(Application): Remove modules (#2249)

Author: hirokiterashima

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.html

@@ -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/classroom-monitor/status-icon/status-icon.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-user-password-complete/forgot-user-password-complete.component.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/forgot/forgot-routing.module.ts src/app/forgot/forgot.routes.tssrc/app/forgot/forgot-routing.module.ts renamed to src/app/forgot/forgot.routes.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.component.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 {}