refactor(Application): Convert remaining components to standalone (#2247)

Convert remaining components to standalone. Remove AppModule and replace with bootstrapApplication(AppComponent)

Author: hirokiterashima

src/app/announcement/announcement.component.ts

@@ -4,10 +4,15 @@ import {
   MatDialogRef,
   MAT_DIALOG_DATA,
   MatDialog,
-  MatDialogModule
+  MatDialogModule,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
 } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButtonModule, MatButton } from '@angular/material/button';
+import { CdkScrollable } from '@angular/cdk/scrolling';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -31,9 +36,16 @@ export class AnnouncementComponent {
 }
 
 @Component({
+  imports: [
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatButton,
+    MatDialogClose
+  ],
   selector: 'announcement-dialog',
-  templateUrl: 'announcement-dialog.component.html',
-  standalone: false
+  templateUrl: 'announcement-dialog.component.html'
 })
 export class AnnouncementDialogComponent {
   constructor(

src/app/app-routing.module.ts

@@ -5,7 +5,7 @@ import { PersonalLibraryComponent } from './modules/library/personal-library/per
 import { PublicLibraryComponent } from './modules/library/public-library/public-library.component';
 import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [
+export const appRoutes: Routes = [
   { path: '', loadChildren: () => import('./home/home.module').then((m) => m.HomeModule) },
   {
     path: 'about',
@@ -78,7 +78,7 @@ export class XhrInterceptor implements HttpInterceptor {
 }
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { paramsInheritanceStrategy: 'always' }), FormsModule],
+  imports: [RouterModule.forRoot(appRoutes, { paramsInheritanceStrategy: 'always' }), FormsModule],
   exports: [RouterModule],
   providers: [{ provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true }]
 })

src/app/app.component.spec.ts

@@ -1,13 +1,17 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { UtilService } from './services/util.service';
 import { Announcement } from './domain/announcement';
 import { ConfigService } from './services/config.service';
 import { Config } from './domain/config';
 import { environment } from '../environments/environment';
 import { provideRouter } from '@angular/router';
+import { MockComponents, MockProviders } from 'ng-mocks';
+import { UserService } from './services/user.service';
+import { MobileMenuComponent } from './modules/mobile-menu/mobile-menu.component';
+import { provideHttpClient } from '@angular/common/http';
+import { HeaderComponent } from './modules/header/header.component';
 
 export class MockConfigService {
   private config$: BehaviorSubject<Config> = new BehaviorSubject<Config>(null);
@@ -54,13 +58,14 @@ describe('AppComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AppComponent],
+      imports: [AppComponent, MockComponents(HeaderComponent, MobileMenuComponent)],
       providers: [
         { provide: ConfigService, useClass: MockConfigService },
         { provide: UtilService, useClass: MockUtilService },
+        MockProviders(UserService),
+        provideHttpClient(),
         provideRouter([])
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
+      ]
     });
     fixture = TestBed.createComponent(AppComponent);
     component = fixture.componentInstance;

src/app/app.component.ts

@@ -1,21 +1,39 @@
 import { Component, Inject, DOCUMENT } from '@angular/core';
-
 import { Router, NavigationEnd, NavigationStart } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MatIconRegistry } from '@angular/material/icon';
-import { Subscription } from 'rxjs';
 import { UtilService } from './services/util.service';
 import { ConfigService } from './services/config.service';
 import { Announcement } from './domain/announcement';
 import { environment } from '../environments/environment';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { CommonModule } from '@angular/common';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+import { MobileMenuComponent } from './modules/mobile-menu/mobile-menu.component';
+import { AnnouncementComponent } from './announcement/announcement.component';
+import { HeaderComponent } from './modules/header/header.component';
+import { FooterComponent } from './modules/footer/footer.component';
+
 declare let gtag: Function;
 
 @Component({
+  imports: [
+    CommonModule,
+    MatSidenavModule,
+    MatButtonModule,
+    MatIconModule,
+    RouterModule,
+    MobileMenuComponent,
+    AnnouncementComponent,
+    HeaderComponent,
+    FooterComponent
+  ],
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  standalone: false
+  styleUrl: './app.component.scss',
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
   title = 'app';

src/app/app.module.ts

@@ -1,18 +1,14 @@
-import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { UnlinkGoogleAccountConfirmComponent } from '../../modules/shared/unlink-google-account-confirm/unlink-google-account-confirm.component';
 
-@Component({
-    selector: 'edit-profile',
-    templateUrl: './edit-profile.component.html',
-    styleUrls: ['./edit-profile.component.scss'],
-    standalone: false
-})
-export class EditProfileComponent {
+export abstract class EditProfileComponent {
   changed: boolean = false;
 
-  constructor(public dialog: MatDialog, public snackBar: MatSnackBar) {}
+  constructor(
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar
+  ) {}
 
   handleUpdateProfileResponse(response) {
     if (response.status === 'success') {

src/app/common/edit-profile/edit-profile.component.html

@@ -1,21 +1,15 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ContactFormComponent } from './contact-form.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ConfigService } from '../../services/config.service';
 import { StudentService } from '../../student/student.service';
 import { User } from '../../domain/user';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { LibraryService } from '../../services/library.service';
 import { RECAPTCHA_V3_SITE_KEY, ReCaptchaV3Service, RecaptchaV3Module } from 'ng-recaptcha-2';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { HttpClient, provideHttpClient } from '@angular/common/http';
 import { UserService } from '../../services/user.service';
 import { By } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
 
 export class MockStudentService {
   getTeacherList(): Observable<User> {
@@ -37,26 +31,29 @@ let userService: UserService;
 describe('ContactFormComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ContactFormComponent],
-      schemas: [NO_ERRORS_SCHEMA],
-      imports: [
-        BrowserAnimationsModule,
-        MatInputModule,
-        MatSelectModule,
-        ReactiveFormsModule,
-        RecaptchaV3Module,
-        RouterTestingModule
-      ],
+      imports: [ContactFormComponent],
       providers: [
         ConfigService,
         { provide: LibraryService, useClass: MockLibraryService },
         { provide: RECAPTCHA_V3_SITE_KEY, useValue: recaptchaPrivateKey },
+        {
+          provide: ReCaptchaV3Service,
+          useValue: {
+            execute: jasmine.createSpy('execute').and.returnValue(of('mock-token'))
+          }
+        },
         { provide: StudentService, useClass: MockStudentService },
         UserService,
-        provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting()
+        provideHttpClient(),
+        provideRouter([])
       ]
-    }).compileComponents();
+    })
+      .overrideComponent(ContactFormComponent, {
+        remove: {
+          imports: [RecaptchaV3Module]
+        }
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -164,7 +161,6 @@ function submit_showRecaptchaErrorMessage(): void {
   it('should show recaptcha error message', async () => {
     isRecaptchaEnabledSpy.and.returnValue(true);
     component.ngOnInit();
-    spyOn(recaptchaV3Service, 'execute').and.returnValue(of('generated-token'));
     const httpPostSpy = httpPostSpyAndReturn('error');
     await submitAndDetectChanges();
     expect(httpPostSpy).toHaveBeenCalled();