From 86c0708bb821579d3fddbe21772b6bfac29f04e5 Mon Sep 17 00:00:00 2001 From: Nic McPhee Date: Mon, 5 Feb 2024 15:47:11 -0600 Subject: [PATCH] Run the angular standalone component migration tool --- client/src/app/app.component.spec.ts | 10 +-- client/src/app/app.component.ts | 14 +++- client/src/app/app.module.ts | 76 ------------------- client/src/app/home/home.component.spec.ts | 5 +- client/src/app/home/home.component.ts | 11 ++- .../src/app/users/user-card.component.spec.ts | 10 +-- client/src/app/users/user-card.component.ts | 12 ++- .../src/app/users/user-list.component.spec.ts | 24 +++--- client/src/app/users/user-list.component.ts | 21 ++++- .../app/users/user-profile.component.spec.ts | 14 ++-- .../src/app/users/user-profile.component.ts | 9 ++- client/src/main.ts | 58 +++++++++++++- 12 files changed, 133 insertions(+), 131 deletions(-) delete mode 100644 client/src/app/app.module.ts diff --git a/client/src/app/app.component.spec.ts b/client/src/app/app.component.spec.ts index 1461fb51..63ff9c6e 100644 --- a/client/src/app/app.component.spec.ts +++ b/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', () => { diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 8a029cce..1b14b38d 100644 --- a/client/src/app/app.component.ts +++ b/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'; diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts deleted file mode 100644 index 34360c35..00000000 --- a/client/src/app/app.module.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; - -import { MatButtonModule } from '@angular/material/button'; -import { MatToolbarModule } from '@angular/material/toolbar'; -import { MatSidenavModule } from '@angular/material/sidenav'; -import { MatIconModule } from '@angular/material/icon'; -import { MatListModule } from '@angular/material/list'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatInputModule } from '@angular/material/input'; -import { MatCardModule } from '@angular/material/card'; -import { MatMenuModule } from '@angular/material/menu'; -import { MatExpansionModule } from '@angular/material/expansion'; -import { MatTooltipModule } from '@angular/material/tooltip'; -import { MatSelectModule } from '@angular/material/select'; -import { MatOptionModule } from '@angular/material/core'; -import { MatDividerModule } from '@angular/material/divider'; -import { MatRadioModule } from '@angular/material/radio'; -import { MatSnackBarModule } from '@angular/material/snack-bar'; - -import { UserListComponent } from './users/user-list.component'; -import { HomeComponent } from './home/home.component'; -import { UserService } from './users/user.service'; -import { HttpClientModule } from '@angular/common/http'; -import { LayoutModule } from '@angular/cdk/layout'; -import { UserCardComponent } from './users/user-card.component'; -import { UserProfileComponent } from './users/user-profile.component'; - -const MATERIAL_MODULES: unknown[] = [ - MatListModule, - MatButtonModule, - MatIconModule, - MatToolbarModule, - MatCardModule, - MatMenuModule, - MatSidenavModule, - MatInputModule, - MatExpansionModule, - MatTooltipModule, - MatSelectModule, - MatOptionModule, - MatFormFieldModule, - MatDividerModule, - MatRadioModule, - MatSnackBarModule -]; - -@NgModule({ - declarations: [ - AppComponent, - HomeComponent, - UserListComponent, - UserCardComponent, - UserProfileComponent, - ], - imports: [ - BrowserModule, - AppRoutingModule, - BrowserAnimationsModule, - FormsModule, - ReactiveFormsModule, - HttpClientModule, - MATERIAL_MODULES, - LayoutModule, - ], - providers: [ - UserService - ], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/client/src/app/home/home.component.spec.ts b/client/src/app/home/home.component.spec.ts index 43b93bb2..96084479 100644 --- a/client/src/app/home/home.component.spec.ts +++ b/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); diff --git a/client/src/app/home/home.component.ts b/client/src/app/home/home.component.ts index 174e4f0c..17c5a322 100644 --- a/client/src/app/home/home.component.ts +++ b/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 {} diff --git a/client/src/app/users/user-card.component.spec.ts b/client/src/app/users/user-card.component.spec.ts index c7fe2867..1f34d2f3 100644 --- a/client/src/app/users/user-card.component.spec.ts +++ b/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(); })); diff --git a/client/src/app/users/user-card.component.ts b/client/src/app/users/user-card.component.ts index bb2ad9aa..2b5896a3 100644 --- a/client/src/app/users/user-card.component.ts +++ b/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 { diff --git a/client/src/app/users/user-list.component.spec.ts b/client/src/app/users/user-list.component.spec.ts index 055662dd..b269b7e0 100644 --- a/client/src/app/users/user-list.component.spec.ts +++ b/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 diff --git a/client/src/app/users/user-list.component.ts b/client/src/app/users/user-list.component.ts index ad9bd920..6bb78aa9 100644 --- a/client/src/app/users/user-list.component.ts +++ b/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) diff --git a/client/src/app/users/user-profile.component.spec.ts b/client/src/app/users/user-profile.component.spec.ts index 07e296d5..873d9c2c 100644 --- a/client/src/app/users/user-profile.component.spec.ts +++ b/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(); })); diff --git a/client/src/app/users/user-profile.component.ts b/client/src/app/users/user-profile.component.ts index 9f4de2bb..c4cc6130 100644 --- a/client/src/app/users/user-profile.component.ts +++ b/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 { diff --git a/client/src/main.ts b/client/src/main.ts index c7b673cf..b9c71427 100644 --- a/client/src/main.ts +++ b/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));