Update to Angular 14

angular.json

@@ -106,8 +106,12 @@
       }
     }
   },
-  "defaultProject": "jhonline",
   "cli": {
+    "cache": {
+      "enabled": true,
+      "path": "./target/angular/",
+      "environment": "all"
+    },
     "packageManager": "yarn"
   }
 }

jest.conf.js

@@ -6,10 +6,9 @@ const {
 const environment = require('./webpack/environment');
 
 module.exports = {
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|dayjs/esm)'],
   testRunner: 'jest-jasmine2',
-  preset: 'jest-preset-angular',
   setupFiles: ['jest-date-mock'],
-  setupFilesAfterEnv: ['<rootDir>/src/test/javascript/jest.ts'],
   cacheDirectory: '<rootDir>/target/jest-cache',
   coverageDirectory: '<rootDir>/target/test-results/',
   globals: {
@@ -23,8 +22,9 @@ module.exports = {
   moduleNameMapper: pathsToModuleNameMapper(paths, { prefix: `<rootDir>/${baseUrl}/` }),
   reporters: ['default', ['jest-junit', { outputDirectory: './target/test-results/', outputName: 'TESTS-results-jest.xml' }]],
   testResultsProcessor: 'jest-sonar-reporter',
-  transformIgnorePatterns: ['node_modules/'],
   testMatch: ['<rootDir>/src/test/javascript/spec/**/@(*.)@(spec.ts)'],
-  testURL: 'http://localhost/',
+  testEnvironmentOptions: {
+    url: 'http://localhost/'
+  },
   roots: ['<rootDir>', `<rootDir>/${baseUrl}`]
 };

package.json

@@ -12,30 +12,30 @@
     "node_modules"
   ],
   "dependencies": {
-    "@angular/common": "13.3.12",
-    "@angular/compiler": "13.3.12",
-    "@angular/core": "13.3.12",
-    "@angular/forms": "13.3.12",
-    "@angular/localize": "13.3.12",
-    "@angular/platform-browser": "13.3.12",
-    "@angular/platform-browser-dynamic": "13.3.12",
-    "@angular/router": "13.3.12",
-    "@fortawesome/angular-fontawesome": "0.10.2",
+    "@angular/common": "14.2.12",
+    "@angular/compiler": "14.2.12",
+    "@angular/core": "14.2.12",
+    "@angular/forms": "14.2.12",
+    "@angular/localize": "14.2.12",
+    "@angular/platform-browser": "14.2.12",
+    "@angular/platform-browser-dynamic": "14.2.12",
+    "@angular/router": "14.2.12",
+    "@fortawesome/angular-fontawesome": "0.11.1",
     "@fortawesome/fontawesome-svg-core": "1.2.27",
     "@fortawesome/free-brands-svg-icons": "5.12.0",
     "@fortawesome/free-solid-svg-icons": "5.12.0",
     "@ng-bootstrap/ng-bootstrap": "11.0.1",
-    "@ngx-translate/core": "13.0.0",
-    "@ngx-translate/http-loader": "6.0.0",
+    "@ngx-translate/core": "14.0.0",
+    "@ngx-translate/http-loader": "7.0.0",
     "@scarf/scarf": "^1.1.1",
     "bootstrap": "4.5.3",
     "echarts": "5.4.0",
     "jquery": "3.6.1",
     "moment": "2.24.0",
     "ng-jhipster": "0.16.0",
-    "ngx-cookie": "5.0.2",
-    "ngx-echarts": "8.0.1",
-    "ngx-infinite-scroll": "13.1.0",
+    "ngx-cookie": "6.0.1",
+    "ngx-echarts": "14.0.0",
+    "ngx-infinite-scroll": "14.0.1",
     "ngx-webstorage": "8.0.0",
     "popper.js": "1.16.1",
     "resize-observer-polyfill": "1.5.1",
@@ -45,16 +45,17 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "13.1.0",
-    "@angular-builders/jest": "13.0.4",
-    "@angular-devkit/build-angular": "~13.3.10",
-    "@angular-eslint/eslint-plugin": "13.5.0",
-    "@angular/cli": "13.3.10",
-    "@angular/compiler-cli": "13.3.12",
+    "@angular-builders/custom-webpack": "14.1.0",
+    "@angular-builders/jest": "14.1.0",
+    "@angular-devkit/build-angular": "^14.2.10",
+    "@angular-eslint/eslint-plugin": "14.4.0",
+    "@angular/cli": "14.2.10",
+    "@angular/compiler-cli": "14.2.12",
     "@openapitools/openapi-generator-cli": "1.0.10-4.2.3",
     "@types/echarts": "^4.6.0",
     "@types/google.analytics": "0.0.40",
     "@types/jest": "27.5.2",
+    "@types/moment": "^2.13.0",
     "@types/node": "12.12.17",
     "@typescript-eslint/eslint-plugin": "5.15.0",
     "@typescript-eslint/parser": "5.15.0",
@@ -67,18 +68,19 @@
     "eslint-webpack-plugin": "3.2.0",
     "generator-jhipster": "7.2.0",
     "husky": "3.1.0",
-    "jest": "27.5.1",
+    "jest": "28.1.3",
     "jest-date-mock": "1.0.7",
+    "jest-environment-jsdom": "28.1.3",
+    "jest-jasmine2": "28.1.3",
     "jest-junit": "15.0.0",
-    "jest-preset-angular": "11.1.2",
+    "jest-preset-angular": "12.2.3",
     "jest-sonar-reporter": "2.0.0",
     "lint-staged": "8.2.1",
     "moment-locales-webpack-plugin": "^1.2.0",
     "prettier": "1.19.1",
     "prettier-plugin-java": "0.8.3",
-    "reflect-metadata": "0.1.13",
     "rimraf": "3.0.0",
-    "ts-jest": "^29.0.3",
+    "ts-jest": "28.0.8",
     "typescript": "4.6.4",
     "webpack": "5.75.0",
     "webpack-bundle-analyzer": "4.7.0",

src/main/webapp/app/account/password-reset/finish/password-reset-finish.component.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 import { LoginModalService } from 'app/core/login/login-modal.service';
@@ -46,7 +46,7 @@ export class PasswordResetFinishComponent implements OnInit, AfterViewInit {
     private passwordResetFinishService: PasswordResetFinishService,
     private loginModalService: LoginModalService,
     private route: ActivatedRoute,
-    private fb: FormBuilder
+    private fb: UntypedFormBuilder
   ) {}
 
   ngOnInit(): void {

src/main/webapp/app/account/password-reset/init/password-reset-init.component.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
 
 import { PasswordResetInitService } from './password-reset-init.service';
 
@@ -34,7 +34,7 @@ export class PasswordResetInitComponent implements AfterViewInit {
     email: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]]
   });
 
-  constructor(private passwordResetInitService: PasswordResetInitService, private fb: FormBuilder) {}
+  constructor(private passwordResetInitService: PasswordResetInitService, private fb: UntypedFormBuilder) {}
 
   ngAfterViewInit(): void {
     if (this.email) {

src/main/webapp/app/account/password/password.component.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 import { AccountService } from 'app/core/auth/account.service';
@@ -39,7 +39,7 @@ export class PasswordComponent implements OnInit {
     confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]]
   });
 
-  constructor(private passwordService: PasswordService, private accountService: AccountService, private fb: FormBuilder) {}
+  constructor(private passwordService: PasswordService, private accountService: AccountService, private fb: UntypedFormBuilder) {}
 
   ngOnInit(): void {
     this.account$ = this.accountService.identity();

src/main/webapp/app/account/register/register.component.ts

@@ -18,7 +18,7 @@
  */
 import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
-import { FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
 
 import { EMAIL_ALREADY_USED_TYPE, LOGIN_ALREADY_USED_TYPE } from 'app/shared/constants/error.constants';
 import { LoginModalService } from 'app/core/login/login-modal.service';
@@ -49,7 +49,7 @@ export class RegisterComponent implements AfterViewInit {
   constructor(
     private loginModalService: LoginModalService,
     private registerService: RegisterService,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private passwordResetService: PasswordResetService
   ) {}
 

src/main/webapp/app/account/settings/settings.component.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { AccountService } from 'app/core/auth/account.service';
 import { Account } from 'app/core/user/account.model';
@@ -36,7 +36,7 @@ export class SettingsComponent implements OnInit {
     email: [undefined, [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]]
   });
 
-  constructor(private accountService: AccountService, private fb: FormBuilder, private modalService: NgbModal) {}
+  constructor(private accountService: AccountService, private fb: UntypedFormBuilder, private modalService: NgbModal) {}
 
   ngOnInit(): void {
     this.accountService.identity().subscribe(account => {

src/main/webapp/app/admin/docs/docs.scss

@@ -1,5 +1,5 @@
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
 
 iframe {
   background: white;

src/main/webapp/app/admin/user-management/user-management-delete-dialog.component.html

@@ -1,4 +1,4 @@
-<form *ngIf="user" name="deleteForm" (ngSubmit)="confirmDelete(user?.login!)">
+<form *ngIf="user" name="deleteForm" (ngSubmit)="confirmDelete(user.login!)">
     <div class="modal-header">
         <h4 class="modal-title">Confirm delete operation</h4>
 

src/main/webapp/app/admin/user-management/user-management-update.component.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 import { User } from 'app/core/user/user.model';
@@ -43,7 +43,7 @@ export class UserManagementUpdateComponent implements OnInit {
     authorities: []
   });
 
-  constructor(private userService: UserService, private route: ActivatedRoute, private fb: FormBuilder) {}
+  constructor(private userService: UserService, private route: ActivatedRoute, private fb: UntypedFormBuilder) {}
 
   ngOnInit(): void {
     this.route.data.subscribe(({ user }) => {

src/main/webapp/app/core/core.module.ts

@@ -26,7 +26,7 @@ import { NgxWebstorageModule } from 'ngx-webstorage';
 import { NgJhipsterModule } from 'ng-jhipster';
 import locale from '@angular/common/locales/en';
 
-import * as moment from 'moment';
+import moment from 'moment';
 import { NgbDateAdapter, NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
 import { NgbDateMomentAdapter } from 'app/shared/util/datepicker-adapter';
 

src/main/webapp/app/entities/statistics/statistics.options.ts

@@ -16,7 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { Frequency } from './statistics.model';
 import { StatisticsUtils } from './statistics.utils';

src/main/webapp/app/layouts/navbar/navbar.scss

@@ -1,5 +1,5 @@
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
 
 /* ==========================================================================
 Navbar

src/main/webapp/app/shared/login/login.component.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Router } from '@angular/router';
 
@@ -44,7 +44,7 @@ export class LoginModalComponent implements AfterViewInit {
     private loginService: LoginService,
     private router: Router,
     public activeModal: NgbActiveModal,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private gitConfigurationService: GitConfigurationService
   ) {}
 

src/main/webapp/app/shared/util/datepicker-adapter.ts

@@ -22,7 +22,7 @@
 import { Injectable } from '@angular/core';
 import { NgbDateAdapter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 import { Moment } from 'moment';
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Injectable()
 export class NgbDateMomentAdapter extends NgbDateAdapter<Moment> {

src/main/webapp/content/scss/global.scss

@@ -1,6 +1,6 @@
 @import 'bootstrap-variables';
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
 
 /* ==============================================================
 Bootstrap tweaks

src/main/webapp/content/scss/vendor.scss

@@ -7,6 +7,6 @@ eg $input-color: red;
 // Override Bootstrap variables
 @import 'bootstrap-variables';
 // Import Bootstrap source files from node_modules
-@import '~bootstrap/scss/bootstrap';
+@import 'bootstrap/scss/bootstrap';
 
 /* jhipster-needle-scss-add-vendor JHipster will add new css style */

src/test/javascript/spec/test.module.ts

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 import { DatePipe } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -69,6 +70,6 @@ import { MockEventManager } from './helpers/mock-event-manager.service';
       useValue: null
     }
   ],
-  imports: [HttpClientTestingModule]
+  imports: [HttpClientTestingModule, ReactiveFormsModule]
 })
 export class JhonlineTestModule {}

tsconfig.json

@@ -13,12 +13,13 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "emitDecoratorMetadata": true,
     "removeComments": false,
     "suppressImplicitAnyIndexErrors": true,
     "skipLibCheck": true,
-    "target": "es6",
+    "target": "es2020",
     "module": "es2020",
     "lib": ["es2018", "dom"],
     "paths": {