feat: migrate to Angular 14 and upgrade dependencies

BREAKING CHANGE:

- Migrate to Angular 14
- Requires Node.js 14+

.ci-templates/test.yml

@@ -4,7 +4,7 @@
 # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript?WT.mc_id=generatorngxrocket-github-yolasors
 
 parameters:
-  nodeVersions: ['12.x', '>=14.x']
+  nodeVersions: ['14.x', '>=16.x']
   operatingSystems: ['ubuntu-latest', 'macos-latest', 'windows-latest']
   testCases: []
 

generators/app/templates/__cordova._config.xml

@@ -20,7 +20,7 @@
 
   <!-- Platforms -->
 <% if (props.mobile.includes('android')) { -%>
-  <engine name="android" spec="^9.0.0"/>
+  <engine name="android" spec="^11.0.0"/>
 <% } -%>
 <% if (props.mobile.includes('ios')) { -%>
   <engine name="ios" spec="^6.2.0"/>
@@ -30,8 +30,10 @@
   <!-- Android specific -->
   <platform name="android">
     <allow-intent href="market:*"/>
-    <preference name="android-minSdkVersion" value="22"/>
+    <preference name="android-targetSdkVersion" value="32"/>
     <preference name="android-manifest/application/activity/@android:theme" value="@android:style/Theme.DeviceDefault"/>
+    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="resources/android/icon/drawable-xxxhdpi-icon.png" />
+    <preference name="AndroidWindowSplashScreenBackground" value="#4487ff" />
     <!-- Copy files in the resources/android/extra folder to Android native resources -->
     <hook src="node_modules/@ngx-rocket/scripts/hooks/after_prepare/copy-android-resources.js" type="after_prepare"/>
     <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png"/>
@@ -40,18 +42,6 @@
     <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png"/>
     <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png"/>
     <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png"/>
-    <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png"/>
-    <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png"/>
-    <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png"/>
-    <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png"/>
-    <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png"/>
-    <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png"/>
-    <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png"/>
-    <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png"/>
-    <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png"/>
-    <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png"/>
-    <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png"/>
-    <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png"/>
   </platform>
 
 <% } -%>
@@ -140,10 +130,10 @@
   <preference name="SplashShowOnlyFirstTime" value="true"/>
 
   <!-- Plugins -->
-  <plugin name="cordova-custom-config" spec="^5.0.2"/>
-  <plugin name="cordova-plugin-device" spec="^2.0.2"/>
-  <plugin name="cordova-plugin-splashscreen" spec="^5.0.2"/>
-  <plugin name="cordova-plugin-statusbar" spec="^2.4.1"/>
-  <plugin name="cordova-plugin-ionic-webview" spec="^4.0.1" />
-  <plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.2" />
+  <plugin name="cordova-custom-config" spec="^5.1.1"/>
+  <plugin name="cordova-plugin-device" spec="^2.1.0"/>
+  <plugin name="cordova-plugin-splashscreen" spec="^6.0.2"/>
+  <plugin name="cordova-plugin-statusbar" spec="^3.0.0"/>
+  <plugin name="cordova-plugin-ionic-webview" spec="^5.0.0" />
+  <plugin name="cordova-plugin-ionic-keyboard" spec="^2.2.0" />
 </widget>

generators/app/templates/__tools-jest._jest.config.js

@@ -1,5 +1,4 @@
-require('jest-preset-angular/ngcc-jest-processor');
-const { pathsToModuleNameMapper } = require('ts-jest/utils');
+const { pathsToModuleNameMapper } = require('ts-jest');
 // In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
 // which contains the path mapping (ie the `compilerOptions.paths` option):
 const { compilerOptions } = require('./tsconfig.json');

generators/app/templates/_package.json

@@ -69,24 +69,24 @@
     "generate": "ng generate"
   },
   "dependencies": {
-    "@angular/animations": "~13.1.0",
-    "@angular/common": "~13.1.0",
-    "@angular/compiler": "~13.1.0",
-    "@angular/core": "~13.1.0",
-    "@angular/forms": "~13.1.0",
+    "@angular/animations": "~14.1.3",
+    "@angular/common": "~14.1.3",
+    "@angular/compiler": "~14.1.3",
+    "@angular/core": "~14.1.3",
+    "@angular/forms": "~14.1.3",
 <%   if (props.ui === 'bootstrap' || props.ui === 'material') { -%>
-    "@angular/localize": "~13.1.0",
+    "@angular/localize": "~14.1.3",
 <%   } -%>
-    "@angular/platform-browser": "~13.1.0",
-    "@angular/platform-browser-dynamic": "~13.1.0",
-    "@angular/router": "~13.1.0",
+    "@angular/platform-browser": "~14.1.3",
+    "@angular/platform-browser-dynamic": "~14.1.3",
+    "@angular/router": "~14.1.3",
     "@ngx-translate/core": "^14.0.0",
 <% if (props.target.includes('cordova')) { -%>
     "@awesome-cordova-plugins/core": "^5.30.0",
     "@awesome-cordova-plugins/keyboard": "^5.30.0",
     "@awesome-cordova-plugins/splash-screen": "^5.30.0",
     "@awesome-cordova-plugins/status-bar": "^5.30.0",
-    "cordova-android": "^10.1.1",
+    "cordova-android": "^11.0.0",
     "cordova-custom-config": "^5.1.0",
     "cordova-ios": "^6.2.0",
     "cordova-plugin-device": "^2.0.3",
@@ -96,7 +96,7 @@
     "cordova-plugin-statusbar": "^3.0.0",
 <% } -%>
 <% if (props.pwa) { -%>
-    "@angular/service-worker": "~13.1.0",
+    "@angular/service-worker": "~14.1.3",
 <% } -%>
 <% if (props.ui === 'ionic') { -%>
     "@ionic/angular": "^6.0.0",
@@ -106,69 +106,69 @@
     "bootstrap": "^5.0.2",
     "@fortawesome/fontawesome-free": "^5.15.1",
 <% } else if (props.ui === 'material') { -%>
-    "@angular/cdk": "~13.1.0",
-    "@angular/material": "~13.1.0",
-    "@angular/flex-layout": "^13.0.0-beta.36",
+    "@angular/cdk": "~14.1.3",
+    "@angular/material": "~14.1.3",
+    "@angular/flex-layout": "^14.0.0-beta.40",
     "material-design-icons-iconfont": "^6.1.0",
 <% } -%>
 <% if (props.angulartics) { -%>
-    "angulartics2": "^11.0.0",
+    "angulartics2": "^12.1.0",
 <% } -%>
 <% if (props.utility.includes('lodash')) { -%>
     "lodash": "^4.17.20",
 <% } -%>
 <% if (props.utility.includes('ramda')) { -%>
-    "ramda": "^0.27.1",
+    "ramda": "^0.28.0",
 <% } -%>
 <% if (props.utility.includes('moment')) { -%>
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
 <% } -%>
 <% if (props.utility.includes('datefns')) { -%>
-    "date-fns": "^2.16.1",
+    "date-fns": "^2.29.2",
 <% } -%>
-    "rxjs": "^7.4.0",
+    "rxjs": "^7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
 <% if (props.target.includes('cordova')) { -%>
-    "cordova": "^10.0.0",
+    "cordova": "^11.0.0",
 <% } -%>
 <% if (props.tools.includes('jest')) { -%>
-    "@angular-builders/jest": "^13.0.0",
-<% } -%>
-    "@angular-devkit/build-angular": "~13.1.0",
-    "@angular-eslint/builder": "~13.0.1",
-    "@angular-eslint/eslint-plugin": "~13.0.1",
-    "@angular-eslint/eslint-plugin-template": "~13.0.1",
-    "@angular-eslint/schematics": "~13.0.1",
-    "@angular-eslint/template-parser": "~13.0.1",
-    "@angular/cli": "~13.1.0",
-    "@angular/compiler-cli": "~13.1.0",
-    "@angular/language-service": "~13.1.0",
+    "@angular-builders/jest": "^14.0.1",
+<% } -%>
+    "@angular-devkit/build-angular": "~14.1.3",
+    "@angular-eslint/builder": "~14.0.3",
+    "@angular-eslint/eslint-plugin": "~14.0.3",
+    "@angular-eslint/eslint-plugin-template": "~14.0.3",
+    "@angular-eslint/schematics": "~14.0.3",
+    "@angular-eslint/template-parser": "~14.0.3",
+    "@angular/cli": "~14.1.3",
+    "@angular/compiler-cli": "~14.1.3",
+    "@angular/language-service": "~14.1.3",
     "@biesbjerg/ngx-translate-extract": "^7.0.3",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
     "@ngx-rocket/scripts": "^5.2.1",
 <% if (props.cypress) { -%>
-    "@cypress/schematic": "^1.5.0",
-    "cypress": "~9.1.1",
+    "@cypress/schematic": "^2.0.3",
+    "cypress": "~10.6.0",
 <% } -%>
     "@ngneat/until-destroy": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "~5.6.0",
-    "@typescript-eslint/parser": "~5.6.0",
+    "@typescript-eslint/eslint-plugin": "~5.34.0",
+    "@typescript-eslint/parser": "~5.34.0",
 <% if (!props.tools.includes('jest') || props.e2e) { -%>
-    "@types/jasmine": "^3.6.2",
+    "@types/jasmine": "^4.0.0",
     "@types/jasminewd2": "^2.0.8",
 <% } -%>
 <% if (props.tools.includes('jest')) { -%>
-    "@types/jest": "^27.0.3",
+    "@types/jest": "^28.1.8",
 <% } -%>
-    "@types/node": "^12.20.37",
+    "@types/node": "^14.0.0",
 <% if (props.utility.includes('lodash')) { -%>
-    "@types/lodash": "^4.14.165",
+    "@types/lodash": "^4.14.184",
 <% } -%>
 <% if (props.utility.includes('ramda')) { -%>
-    "@types/ramda": "^0.27.34",
+    "@types/ramda": "^0.28.15",
 <% } -%>
 <% if (props.target.includes('electron')) { -%>
     "electron": "^16.0.2",
@@ -185,43 +185,42 @@
 <% if (props.tools.includes('compodoc')) { -%>
     "@compodoc/compodoc": "^1.1.11",
 <% } -%>
-    "htmlhint": "^1.0.0",
     "https-proxy-agent": "^5.0.0",
 <% if (!props.tools.includes('jest') || props.e2e) { -%>
-    "jasmine-core": "~3.8.0",
+    "jasmine-core": "~4.2.0",
     "jasmine-spec-reporter": "~7.0.0",
 <% } -%>
 <% if (props.tools.includes('jest')) { -%>
-    "jest": "^27.0.6",
-    "ts-jest": "^27.0.5",
+    "jest": "^28.1.3",
+    "ts-jest": "^28.0.8",
 <% } else { -%>
-    "karma": "~6.3.0",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "~1.7.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
     "karma-junit-reporter": "^2.0.1",
 <% } -%>
 <% if (props.tools.includes('prettier')) { -%>
     "prettier": "^2.2.1",
     "stylelint-config-prettier": "^9.0.3",
 <%   if (options.git) { -%>
     "pretty-quick": "^3.1.0",
-    "husky": "^7.0.1",
+    "husky": "^8.0.1",
 <%   } -%>
 <% } -%>
 <% if (props.e2e) { -%>
     "protractor": "~7.0.0",
 <% } -%>
 <% if (props.tools.includes('puppeteer')) { -%>
-    "puppeteer": "^12.0.1",
+    "puppeteer": "^16.2.0",
 <% } -%>
-    "stylelint": "~14.1.0",
-    "stylelint-config-recommended-scss": "~5.0.2",
-    "stylelint-config-standard": "~24.0.0",
+    "stylelint": "~14.11.0",
+    "stylelint-config-recommended-scss": "~7.0.0",
+    "stylelint-config-standard": "~28.0.0",
     "postcss": "^8.4.5",
     "ts-node": "^10.1.0",
-    "typescript": "~4.4.3"
+    "typescript": "~4.7.4"
 <% if (props.tools.includes('prettier')) { -%>
   },
   "prettier": {