Merge pull request #1202 from UMM-CSci-3601/run-standalone-component-…

…migration

Run the angular standalone component migration tool

client/src/app/app.component.spec.ts

@@ -11,19 +11,17 @@ import { MatListModule } from '@angular/material/list';
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
+    imports: [
         BrowserAnimationsModule,
         RouterTestingModule,
         MatToolbarModule,
         MatIconModule,
         MatSidenavModule,
         MatCardModule,
-        MatListModule
-      ],
-      declarations: [
+        MatListModule,
         AppComponent
-      ],
-    }).compileComponents();
+    ],
+}).compileComponents();
   }));
 
   it('should create the app', () => {

client/src/app/app.component.ts

@@ -1,9 +1,17 @@
 import { Component } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { MatNavList, MatListItem } from '@angular/material/list';
+import { MatToolbar } from '@angular/material/toolbar';
+import { MatSidenavContainer, MatSidenav, MatSidenavContent } from '@angular/material/sidenav';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [MatSidenavContainer, MatSidenav, MatToolbar, MatNavList, MatListItem, RouterLink, RouterLinkActive, MatIcon, MatSidenavContent, MatIconButton, RouterOutlet]
 })
 export class AppComponent {
   title = 'CSCI 3601 Lab 3';

client/src/app/home/home.component.spec.ts

@@ -12,9 +12,8 @@ describe('Home', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [MatCardModule],
-      declarations: [HomeComponent], // declare the test component
-    });
+    imports: [MatCardModule, HomeComponent],
+});
 
     fixture = TestBed.createComponent(HomeComponent);
 

client/src/app/home/home.component.ts

@@ -1,9 +1,12 @@
 import {Component} from '@angular/core';
+import { MatCard } from '@angular/material/card';
 
 @Component({
-  selector: 'app-home-component',
-  templateUrl: 'home.component.html',
-  styleUrls: ['./home.component.scss'],
-  providers: []
+    selector: 'app-home-component',
+    templateUrl: 'home.component.html',
+    styleUrls: ['./home.component.scss'],
+    providers: [],
+    standalone: true,
+    imports: [MatCard]
 })
 export class HomeComponent {}

client/src/app/users/user-card.component.spec.ts

@@ -10,12 +10,12 @@ describe('UserCardComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
+    imports: [
         BrowserAnimationsModule,
-        MatCardModule
-      ],
-      declarations: [ UserCardComponent ]
-    })
+        MatCardModule,
+        UserCardComponent
+    ]
+})
     .compileComponents();
   }));
 

client/src/app/users/user-card.component.ts

@@ -1,10 +1,16 @@
 import { Component, Input } from '@angular/core';
 import { User } from './user';
+import { RouterLink } from '@angular/router';
+import { MatButton } from '@angular/material/button';
+import { MatCard, MatCardHeader, MatCardAvatar, MatCardTitle, MatCardSubtitle, MatCardContent, MatCardActions } from '@angular/material/card';
+import { NgIf } from '@angular/common';
 
 @Component({
-  selector: 'app-user-card',
-  templateUrl: './user-card.component.html',
-  styleUrls: ['./user-card.component.scss']
+    selector: 'app-user-card',
+    templateUrl: './user-card.component.html',
+    styleUrls: ['./user-card.component.scss'],
+    standalone: true,
+    imports: [NgIf, MatCard, MatCardHeader, MatCardAvatar, MatCardTitle, MatCardSubtitle, MatCardContent, MatCardActions, MatButton, RouterLink]
 })
 export class UserCardComponent {
 

client/src/app/users/user-list.component.spec.ts

@@ -52,13 +52,12 @@ describe('UserListComponent', () => {
   // can find all the necessary parts.
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [COMMON_IMPORTS],
-      declarations: [UserListComponent, UserCardComponent],
-      // providers:    [ UserService ]  // NO! Don't provide the real service!
-      // Provide a test-double instead
-      // This MockerUserService is defined in client/testing/user.service.mock.
-      providers: [{ provide: UserService, useValue: new MockUserService() }]
-    });
+    imports: [COMMON_IMPORTS, UserListComponent, UserCardComponent],
+    // providers:    [ UserService ]  // NO! Don't provide the real service!
+    // Provide a test-double instead
+    // This MockerUserService is defined in client/testing/user.service.mock.
+    providers: [{ provide: UserService, useValue: new MockUserService() }]
+});
   });
 
   // This constructs the `userList` (declared
@@ -136,12 +135,11 @@ describe('Misbehaving User List', () => {
     };
 
     TestBed.configureTestingModule({
-      imports: [COMMON_IMPORTS],
-      declarations: [UserListComponent],
-      // providers:    [ UserService ]  // NO! Don't provide the real service!
-      // Provide a test-double instead
-      providers: [{ provide: UserService, useValue: userServiceStub }]
-    });
+    imports: [COMMON_IMPORTS, UserListComponent],
+    // providers:    [ UserService ]  // NO! Don't provide the real service!
+    // Provide a test-double instead
+    providers: [{ provide: UserService, useValue: userServiceStub }]
+});
   });
 
   // Construct the `userList` used for the testing in the `it` statement

client/src/app/users/user-list.component.ts

@@ -3,6 +3,17 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { User, UserRole } from './user';
 import { UserService } from './user.service';
 import { Subject, takeUntil } from 'rxjs';
+import { RouterLink } from '@angular/router';
+import { MatNavList, MatListSubheaderCssMatStyler, MatListItem, MatListItemAvatar, MatListItemTitle, MatListItemLine } from '@angular/material/list';
+import { UserCardComponent } from './user-card.component';
+import { NgIf, NgSwitch, NgSwitchCase, NgFor } from '@angular/common';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import { MatOption } from '@angular/material/core';
+import { MatSelect } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { MatFormField, MatLabel, MatHint, MatError } from '@angular/material/form-field';
+import { MatCard, MatCardTitle, MatCardContent } from '@angular/material/card';
 
 /**
  * A component that displays a list of users, either as a grid
@@ -15,10 +26,12 @@ import { Subject, takeUntil } from 'rxjs';
  * makes the most sense to do the filtering.
  */
 @Component({
-  selector: 'app-user-list-component',
-  templateUrl: 'user-list.component.html',
-  styleUrls: ['./user-list.component.scss'],
-  providers: []
+    selector: 'app-user-list-component',
+    templateUrl: 'user-list.component.html',
+    styleUrls: ['./user-list.component.scss'],
+    providers: [],
+    standalone: true,
+    imports: [MatCard, MatCardTitle, MatCardContent, MatFormField, MatLabel, MatInput, FormsModule, MatHint, MatSelect, MatOption, MatRadioGroup, MatRadioButton, NgIf, NgSwitch, NgSwitchCase, NgFor, UserCardComponent, MatNavList, MatListSubheaderCssMatStyler, MatListItem, RouterLink, MatListItemAvatar, MatListItemTitle, MatListItemLine, MatError]
 })
 export class UserListComponent implements OnInit {
   // These are public so that tests can reference them (.spec.ts)

client/src/app/users/user-profile.component.spec.ts

@@ -16,16 +16,16 @@ describe('UserProfileComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
+    imports: [
         RouterTestingModule,
-        MatCardModule
-      ],
-      declarations: [UserProfileComponent, UserCardComponent],
-      providers: [
+        MatCardModule,
+        UserProfileComponent, UserCardComponent
+    ],
+    providers: [
         { provide: UserService, useValue: new MockUserService() },
         { provide: ActivatedRoute, useValue: activatedRoute }
-      ]
-    })
+    ]
+})
       .compileComponents();
   }));
 

client/src/app/users/user-profile.component.ts

@@ -2,11 +2,14 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { User } from './user';
 import { UserService } from './user.service';
+import { UserCardComponent } from './user-card.component';
 
 @Component({
-  selector: 'app-user-profile',
-  templateUrl: './user-profile.component.html',
-  styleUrls: ['./user-profile.component.scss']
+    selector: 'app-user-profile',
+    templateUrl: './user-profile.component.html',
+    styleUrls: ['./user-profile.component.scss'],
+    standalone: true,
+    imports: [UserCardComponent]
 })
 export class UserProfileComponent implements OnInit {
 

client/src/main.ts

@@ -1,12 +1,62 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 
-import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { LayoutModule } from '@angular/cdk/layout';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatInputModule } from '@angular/material/input';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatCardModule } from '@angular/material/card';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { AppRoutingModule } from './app/app-routing.module';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { UserService } from './app/users/user.service';
+
+const MATERIAL_MODULES = [
+  MatListModule,
+  MatButtonModule,
+  MatIconModule,
+  MatToolbarModule,
+  MatCardModule,
+  MatMenuModule,
+  MatSidenavModule,
+  MatInputModule,
+  MatExpansionModule,
+  MatTooltipModule,
+  MatSelectModule,
+  MatOptionModule,
+  MatFormFieldModule,
+  MatDividerModule,
+  MatRadioModule,
+  MatSnackBarModule
+];
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, MATERIAL_MODULES, LayoutModule),
+        UserService,
+        provideAnimations(),
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+})
   .catch(err => console.error(err));