chore(Application): Upgrade to Angular v17 (#1740)

chore(Build): Update node version to 18 and add install phase to ym file to work with GitHub Actions

buildspec.yml

@@ -1,9 +1,13 @@
 version: 0.2
 
 phases:
-  build:
+  install:
+    runtime-versions:
+      nodejs: 18
     commands:
       - npm ci
+  build:
+    commands:
       - npm run build-prod
 
 artifacts:

package.json

@@ -10,18 +10,18 @@
     "not dead"
   ],
   "dependencies": {
-    "@angular/animations": "^16.2.9",
-    "@angular/cdk": "^16.2.9",
-    "@angular/common": "^16.2.9",
-    "@angular/compiler": "^16.2.9",
-    "@angular/core": "^16.2.9",
-    "@angular/elements": "^16.2.9",
+    "@angular/animations": "^17.0.0",
+    "@angular/cdk": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/elements": "^17.0.0",
     "@angular/flex-layout": "^15.0.0-beta.42",
-    "@angular/forms": "^16.2.9",
-    "@angular/material": "^16.2.9",
-    "@angular/platform-browser": "^16.2.9",
-    "@angular/platform-browser-dynamic": "^16.2.9",
-    "@angular/router": "^16.2.9",
+    "@angular/forms": "^17.0.0",
+    "@angular/material": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/router": "^17.0.0",
     "@aws-sdk/client-cognito-identity": "^3.310.0",
     "@aws-sdk/client-comprehend": "^3.310.0",
     "@aws-sdk/client-ses": "^3.310.0",
@@ -34,9 +34,9 @@
     "@stomp/stompjs": "^5.4.4",
     "@tinymce/tinymce-angular": "^7.0.0",
     "@wise-community/drawing-tool": "^2.3.0-pre.1",
-    "@zxcvbn-ts/core": "^2.2.1",
-    "@zxcvbn-ts/language-en": "^2.1.0",
-    "@wise-community/angular-password-strength-meter": "^7.0.1",
+    "@zxcvbn-ts/core": "^3.0.4",
+    "@zxcvbn-ts/language-en": "^3.0.2",
+    "angular-password-strength-meter": "^11.0.0",
     "buffer": "^6.0.3",
     "canvg": "^2.0.0",
     "compute-covariance": "^1.0.1",
@@ -56,7 +56,7 @@
     "mathjax": "^3.2.2",
     "microphone-stream": "^6.0.1",
     "ng-file-upload": "^12.2.13",
-    "ng-recaptcha": "^12.0.2",
+    "ng-recaptcha": "^13.2.1",
     "ngx-filesize": "^3.0.2",
     "process": "^0.11.10",
     "rxjs": "^7.5.6",
@@ -69,18 +69,18 @@
     "tslib": "^2.3.1",
     "webfontloader": "^1.6.28",
     "xmldom": "^0.1.31",
-    "zone.js": "^0.13.3"
+    "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.6",
-    "@angular/cli": "^16.2.6",
-    "@angular/compiler-cli": "^16.2.9",
-    "@angular/language-service": "^16.2.9",
-    "@angular/localize": "^16.2.9",
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular/cli": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.0",
+    "@angular/language-service": "^17.0.0",
+    "@angular/localize": "^17.0.0",
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
-    "@ngtools/webpack": "^16.2.6",
+    "@ngtools/webpack": "^17.0.1",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/github": "^8.0.4",
     "@types/dom-mediacapture-record": "^1.0.11",
@@ -124,7 +124,7 @@
     "ts-loader": "^6.2.2",
     "ts-node": "~8.2.0",
     "tslint": "~6.1.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.2.2",
     "url-loader": "^4.1.1",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^4.15.0",

src/app/about/about.component.html

@@ -274,7 +274,8 @@ <h2 class="accent" i18n>Support Diverse Learners</h2>
       >
         <div
           class="content-block about__goal"
-          ngClass.gt-xs="about__goal--alt"
+          [ngClass]="{ 'about__goal--alt': false }"
+          [ngClass.gt-xs]="{ 'about__goal--alt': true }"
           fxFlex="100%"
           fxFlex.gt-xs="50%"
         >
@@ -288,7 +289,8 @@ <h2 class="accent" i18n>Increase Participation in Science</h2>
         </div>
         <div
           class="content-block about__goal"
-          ngClass.xs="about__goal--alt"
+          [ngClass]="{ 'about__goal--alt': false }"
+          [ngClass.xs]="{ 'about__goal--alt': true }"
           fxFlex="100%"
           fxFlex.gt-xs="50%"
         >

src/app/authoring-tool/edit-component-peer-grouping-tag/edit-component-peer-grouping-tag.component.spec.ts

@@ -4,6 +4,8 @@ import { SelectPeerGroupingAuthoringComponent } from '../../../assets/wise5/auth
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
 import { StudentTeacherCommonServicesModule } from '../../student-teacher-common-services.module';
 import { EditComponentPeerGroupingTagComponent } from './edit-component-peer-grouping-tag.component';
+import { PeerGroupingAuthoringService } from '../../../assets/wise5/services/peerGroupingAuthoringService';
+import { PeerGrouping } from '../../domain/peerGrouping';
 
 let component: EditComponentPeerGroupingTagComponent;
 let fixture: ComponentFixture<EditComponentPeerGroupingTagComponent>;
@@ -15,7 +17,8 @@ describe('EditComponentPeerGroupingTagComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [PeerGroupingTestingModule, StudentTeacherCommonServicesModule],
-      declarations: [EditComponentPeerGroupingTagComponent, SelectPeerGroupingAuthoringComponent]
+      declarations: [EditComponentPeerGroupingTagComponent, SelectPeerGroupingAuthoringComponent],
+      providers: [PeerGroupingAuthoringService]
     }).compileComponents();
   });
 
@@ -25,6 +28,10 @@ describe('EditComponentPeerGroupingTagComponent', () => {
     component.componentContent = { peerGroupingTag: tag1 };
     projectService = TestBed.inject(TeacherProjectService);
     spyOn(projectService, 'getPeerGroupings').and.returnValue([]);
+    const peerGrouping1 = new PeerGrouping({ tag: tag1 });
+    spyOn(TestBed.inject(PeerGroupingAuthoringService), 'getPeerGrouping').and.returnValue(
+      peerGrouping1
+    );
     fixture.detectChanges();
   });
 

src/app/modules/library/home-page-project-library/home-page-project-library.component.scss

@@ -1,5 +1,5 @@
+@use '@angular/material' as mat;
 @import
-  '@angular/material/theming',
   'style/abstracts/variables',
   'style/abstracts/mixins',
   'style/abstracts/functions';

src/app/modules/library/personal-library/personal-library.component.ts

@@ -132,13 +132,12 @@ export class PersonalLibraryComponent extends LibraryComponent {
   protected updateSelectedProjects(event: ProjectSelectionEvent): void {
     if (event.selected) {
       this.selectedProjects.update((selectedProjects) => {
-        selectedProjects.push(event.project);
-        return selectedProjects;
+        return [...selectedProjects, event.project];
       });
     } else {
       this.selectedProjects.update((selectedProjects) => {
         selectedProjects.splice(selectedProjects.indexOf(event.project), 1);
-        return selectedProjects;
+        return [...selectedProjects];
       });
     }
   }

src/app/modules/library/teacher-project-library/teacher-project-library.component.scss

@@ -1,5 +1,5 @@
+@use '@angular/material' as mat;
 @import
-  '@angular/material/theming',
   'style/abstracts/variables',
   'style/abstracts/mixins',
   'style/abstracts/functions';

src/app/password/password.module.ts

@@ -6,9 +6,10 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { NewPasswordAndConfirmComponent } from './new-password-and-confirm/new-password-and-confirm.component';
 import { MatIconModule } from '@angular/material/icon';
-import { PasswordStrengthMeterModule } from '@wise-community/angular-password-strength-meter';
+import { PasswordStrengthMeterComponent } from 'angular-password-strength-meter';
 import { PasswordRequirementComponent } from './password-requirement/password-requirement.component';
 import { MatMenuModule } from '@angular/material/menu';
+import { provideZxvbnServiceForPSM } from 'angular-password-strength-meter/zxcvbn';
 
 @NgModule({
   imports: [
@@ -19,10 +20,11 @@ import { MatMenuModule } from '@angular/material/menu';
     MatIconModule,
     MatInputModule,
     MatMenuModule,
-    PasswordStrengthMeterModule.forRoot(),
+    PasswordStrengthMeterComponent,
     ReactiveFormsModule
   ],
   declarations: [NewPasswordAndConfirmComponent, PasswordRequirementComponent],
+  providers: [provideZxvbnServiceForPSM()],
   exports: [NewPasswordAndConfirmComponent]
 })
 export class PasswordModule {}

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts

@@ -10,6 +10,7 @@ import { scrollToTopOfPage, temporarilyHighlightElement } from '../../../common/
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TeacherNodeService } from '../../../services/teacherNodeService';
+import { copy } from '../../../common/object/object';
 
 @Component({
   selector: 'node-authoring',
@@ -204,7 +205,10 @@ export class NodeAuthoringComponent implements OnInit {
 
   private afterDeleteComponent(componentIdAndTypes: any[]): void {
     for (const componentIdAndType of componentIdAndTypes) {
-      this.componentsToChecked.mutate((obj) => delete obj[componentIdAndType.componentId]);
+      this.componentsToChecked.update((componentsToChecked) => {
+        delete componentsToChecked[componentIdAndType.componentId];
+        return copy(componentsToChecked);
+      });
       delete this.componentsToExpanded[componentIdAndType.componentId];
     }
     this.checkIfNeedToShowNodeSaveOrNodeSubmitButtons();
@@ -250,7 +254,10 @@ export class NodeAuthoringComponent implements OnInit {
   }
 
   protected componentCheckboxChanged(componentId: string, checked: boolean): void {
-    this.componentsToChecked.mutate((obj) => (obj[componentId] = checked));
+    this.componentsToChecked.update((componentsToChecked) => {
+      componentsToChecked[componentId] = checked;
+      return copy(componentsToChecked);
+    });
   }
 
   protected toggleComponent(componentId: string): void {

src/assets/wise5/authoringTool/peer-grouping/select-peer-grouping-authoring/select-peer-grouping-authoring.component.spec.ts

@@ -24,9 +24,9 @@ describe('SelectPeerGroupingAuthoringComponent', () => {
     fixture = TestBed.createComponent(SelectPeerGroupingAuthoringComponent);
     component = fixture.componentInstance;
     peerGrouping1 = new PeerGrouping({ tag: tag1 });
-    spyOn(TestBed.inject(PeerGroupingAuthoringService), 'getPeerGroupings').and.returnValue([
+    spyOn(TestBed.inject(PeerGroupingAuthoringService), 'getPeerGrouping').and.returnValue(
       peerGrouping1
-    ]);
+    );
     fixture.detectChanges();
   });
 

src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts

@@ -9,6 +9,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { SelectNodeEvent } from '../domain/select-node-event';
 import { NodeTypeSelected } from '../domain/node-type-selected';
 import { ExpandEvent } from '../domain/expand-event';
+import { copy } from '../../common/object/object';
 
 @Component({
   selector: 'project-authoring',
@@ -112,10 +113,11 @@ export class ProjectAuthoringComponent implements OnInit {
   }
 
   private removeLessonIdToExpandedEntries(nodeIds: string[]): void {
-    this.lessonIdToExpanded.mutate((value) => {
+    this.lessonIdToExpanded.update((lessonIdToExpanded) => {
       nodeIds.forEach((nodeId) => {
-        delete value[nodeId];
+        delete lessonIdToExpanded[nodeId];
       });
+      return copy(lessonIdToExpanded);
     });
   }
 
@@ -192,19 +194,21 @@ export class ProjectAuthoringComponent implements OnInit {
   }
 
   private setAllLessonsExpandedValue(expanded: boolean): void {
-    this.lessonIdToExpanded.mutate((value) => {
+    this.lessonIdToExpanded.update((lessonIdToExpanded) => {
       for (const lesson of this.lessons) {
-        value[lesson.id] = expanded;
+        lessonIdToExpanded[lesson.id] = expanded;
       }
       for (const inactiveGroupNode of this.inactiveGroupNodes) {
-        value[inactiveGroupNode.id] = expanded;
+        lessonIdToExpanded[inactiveGroupNode.id] = expanded;
       }
+      return copy(lessonIdToExpanded);
     });
   }
 
   protected onExpandedChanged(event: ExpandEvent): void {
-    this.lessonIdToExpanded.mutate((value) => {
-      value[event.id] = event.expanded;
+    this.lessonIdToExpanded.update((lessonIdToExpanded) => {
+      lessonIdToExpanded[event.id] = event.expanded;
+      return copy(lessonIdToExpanded);
     });
     const lesson = this.lessons
       .concat(this.inactiveGroupNodes)

src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.scss

@@ -1,5 +1,5 @@
+@use '@angular/material' as mat;
 @import
-  '@angular/material/theming',
   'style/abstracts/functions',
   'style/abstracts/variables';
 

src/assets/wise5/components/discussion/discussion-student/discussion-student.component.html

@@ -10,7 +10,12 @@
   >
   </component-annotations>
   <div fxLayout="row">
-    <div class="discussion-posts" ngClass.gt-sm="half-width" ngClass.lt-md="full-width">
+    <div
+      class="discussion-posts"
+      [ngClass]="{ 'half-width': false, 'full-width': false }"
+      [ngClass.gt-sm]="{ 'half-width': true, 'full-width': false }"
+      [ngClass.lt-md]="{ 'half-width': false, 'full-width': true }"
+    >
       <mat-card
         appearance="outlined"
         class="discussion-new discussion-post"