feat: update to Angular 13

BREAKING CHANGES:

- Update to Angular 13
- Use @angular/cdk/layout for responsive adaptations in code

Author: sinedied

generators/app/templates/_.stylelintrc

@@ -47,6 +47,7 @@
     ],
     "unit-allowed-list": ["px", "%", "em", "rem", "vw", "vh", "deg", "s"],
     "max-empty-lines": 2,
-    "max-line-length": 120
+    "max-line-length": 120,
+    "no-invalid-position-at-import-rule": null
   }
 }

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

@@ -19,10 +19,5 @@ module.exports = {
       }
     },
   },
-  // Do not ignore librairies such as ionic, ionic-native or bootstrap to transform them during unit testing.
-<% const excludedLibrairies = ['jest-test']
-  if (props.target.includes('cordova')) { excludedLibrairies.push('@ionic-native'); }
-  if (props.ui === 'ionic') { excludedLibrairies.push('@ionic'); }
-  if (props.ui === 'bootstrap') { excludedLibrairies.push('@ng-bootstrap'); } -%>
-  transformIgnorePatterns: ['node_modules/(?!(<%- excludedLibrairies.join('|') %>))']
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)']
 };

generators/app/templates/_package.json

@@ -16,7 +16,7 @@
 <% if (props.pwa) { -%>
     "serve:sw": "<%= run('build') %> && npx http-server ./<%= props.target.includes('cordova') ? 'www': 'dist' %> -p 4200",
 <% } -%>
-    "lint": "ng lint && stylelint \"src/**/*.scss\" --syntax scss",
+    "lint": "ng lint && stylelint \"src/**/*.scss\"",
     "test": "<%= run('write:env') %> && ng test",
     "test:ci": "<%= run('write:env') %> && <%= run('lint') %> && ng test --configuration=ci",
 <% if (props.e2e || props.cypress) { -%>
@@ -69,24 +69,24 @@
     "generate": "ng generate"
   },
   "dependencies": {
-    "@angular/animations": "^13.0.3",
-    "@angular/common": "^13.0.3",
-    "@angular/compiler": "^13.0.3",
-    "@angular/core": "^13.0.3",
-    "@angular/forms": "^13.0.3",
+    "@angular/animations": "^13.0.2",
+    "@angular/common": "^13.0.2",
+    "@angular/compiler": "^13.0.2",
+    "@angular/core": "^13.0.2",
+    "@angular/forms": "^13.0.2",
 <%   if (props.ui === 'bootstrap' || props.ui === 'material') { -%>
-    "@angular/localize": "^13.0.3",
+    "@angular/localize": "^13.0.2",
 <%   } -%>
-    "@angular/platform-browser": "^13.0.3",
-    "@angular/platform-browser-dynamic": "^13.0.3",
-    "@angular/router": "^13.0.3",
-    "@ngx-translate/core": "^13.0.0",
+    "@angular/platform-browser": "^13.0.2",
+    "@angular/platform-browser-dynamic": "^13.0.2",
+    "@angular/router": "^13.0.2",
+    "@ngx-translate/core": "^14.0.0",
 <% if (props.target.includes('cordova')) { -%>
     "@ionic-native/core": "^5.30.0",
     "@ionic-native/keyboard": "^5.30.0",
     "@ionic-native/splash-screen": "^5.30.0",
     "@ionic-native/status-bar": "^5.30.0",
-    "cordova-android": "^9.0.0",
+    "cordova-android": "^10.1.1",
     "cordova-custom-config": "^5.1.0",
     "cordova-ios": "^6.2.0",
     "cordova-plugin-device": "^2.0.3",
@@ -97,7 +97,7 @@
     "cordova-plugin-whitelist": "^1.3.4",
 <% } -%>
 <% if (props.pwa) { -%>
-    "@angular/service-worker": "^13.0.3",
+    "@angular/service-worker": "^13.0.2",
 <% } -%>
 <% if (props.ui === 'ionic') { -%>
     "@ionic/angular": "^5.6.11",
@@ -106,13 +106,13 @@
     "bootstrap": "^5.0.2",
     "@fortawesome/fontawesome-free": "^5.15.1",
 <% } else if (props.ui === 'material') { -%>
-    "@angular/cdk": "^13.0.3",
-    "@angular/material": "^13.0.3",
-    "@angular/flex-layout": "^12.0.0-beta.34",
+    "@angular/cdk": "^13.0.2",
+    "@angular/material": "^13.0.2",
+    "@angular/flex-layout": "^12.0.0-beta.35",
     "material-design-icons-iconfont": "^6.1.0",
 <% } -%>
 <% if (props.angulartics) { -%>
-    "angulartics2": "^10.0.0",
+    "angulartics2": "^11.0.0",
 <% } -%>
 <% if (props.utility.includes('lodash')) { -%>
     "lodash": "^4.17.20",
@@ -126,7 +126,7 @@
 <% if (props.utility.includes('datefns')) { -%>
     "date-fns": "^2.16.1",
 <% } -%>
-    "rxjs": "^7.4.0",
+    "rxjs": "^6.6.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
@@ -135,35 +135,35 @@
     "cordova": "^10.0.0",
 <% } -%>
 <% if (props.tools.includes('jest')) { -%>
-    "@angular-builders/jest": "^12.1.0",
-<% } -%>
-    "@angular-devkit/build-angular": "~13.0.3",
-    "@angular-eslint/builder": "~12.3.1",
-    "@angular-eslint/eslint-plugin": "~12.3.1",
-    "@angular-eslint/eslint-plugin-template": "~12.3.1",
-    "@angular-eslint/schematics": "~12.3.1",
-    "@angular-eslint/template-parser": "~12.3.1",
-    "@angular/cli": "~13.0.3",
-    "@angular/compiler-cli": "~13.0.3",
-    "@angular/language-service": "~13.0.3",
+    "@angular-builders/jest": "^13.0.0",
+<% } -%>
+    "@angular-devkit/build-angular": "~13.0.2",
+    "@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.0.2",
+    "@angular/compiler-cli": "~13.0.2",
+    "@angular/language-service": "~13.0.2",
     "@biesbjerg/ngx-translate-extract": "^7.0.3",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
     "@ngx-rocket/scripts": "^5.1.0",
 <% if (props.cypress) { -%>
     "@cypress/schematic": "^1.5.0",
     "cypress": "9.1.0",
 <% } -%>
-    "@ngneat/until-destroy": "^8.0.4",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
-    "@typescript-eslint/parser": "4.28.2",
+    "@ngneat/until-destroy": "^9.0.0",
+    "@typescript-eslint/eslint-plugin": "5.4.0",
+    "@typescript-eslint/parser": "5.4.0",
 <% if (!props.tools.includes('jest') || props.e2e) { -%>
     "@types/jasmine": "^3.6.2",
     "@types/jasminewd2": "^2.0.8",
 <% } -%>
 <% if (props.tools.includes('jest')) { -%>
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^27.0.3",
 <% } -%>
-    "@types/node": "^12.19.12",
+    "@types/node": "^12.20.37",
 <% if (props.utility.includes('lodash')) { -%>
     "@types/lodash": "^4.14.165",
 <% } -%>
@@ -175,7 +175,7 @@
     "electron-packager": "^15.1.0",
     "electron-reload": "^1.5.0",
 <% } -%>
-    "eslint": "^7.26.0",
+    "eslint": "^8.3.0",
     "eslint-plugin-import": "latest",
     "eslint-plugin-jsdoc": "latest",
     "eslint-plugin-prefer-arrow": "latest",
@@ -185,7 +185,7 @@
 <% if (props.tools.includes('compodoc')) { -%>
     "@compodoc/compodoc": "^1.1.11",
 <% } -%>
-    "htmlhint": "^0.15.1",
+    "htmlhint": "^1.0.0",
     "https-proxy-agent": "^5.0.0",
 <% if (!props.tools.includes('jest') || props.e2e) { -%>
     "jasmine-core": "~3.8.0",
@@ -204,7 +204,7 @@
 <% } -%>
 <% if (props.tools.includes('prettier')) { -%>
     "prettier": "^2.2.1",
-    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-prettier": "^9.0.3",
 <%   if (options.git) { -%>
     "pretty-quick": "^3.1.0",
     "husky": "^7.0.1",
@@ -214,12 +214,12 @@
     "protractor": "~7.0.0",
 <% } -%>
 <% if (props.tools.includes('puppeteer')) { -%>
-    "puppeteer": "^5.5.0",
+    "puppeteer": "^12.0.0",
 <% } -%>
-    "stylelint": "~13.13.1",
-    "stylelint-config-recommended-scss": "~4.3.0",
-    "stylelint-config-standard": "~22.0.0",
-    "stylelint-scss": "~3.20.1",
+    "stylelint": "~14.1.0",
+    "stylelint-config-recommended-scss": "~5.0.2",
+    "stylelint-config-standard": "~24.0.0",
+    "stylelint-scss": "~4.0.0",
     "ts-node": "^10.1.0",
     "typescript": "~4.4.3"
 <% if (props.tools.includes('prettier')) { -%>

generators/app/templates/src/_polyfills.ts

@@ -25,9 +25,6 @@ import '@angular/localize/init';
  * BROWSER POLYFILLS
  */
 
-/** IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

generators/app/templates/src/app/_app.component.ts

@@ -21,7 +21,7 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { Keyboard } from '@ionic-native/keyboard/ngx';
 <% } -%>
 <% if (props.angulartics && props.analyticsProvider === 'ga') { -%>
-import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+import { Angulartics2GoogleAnalytics } from 'angulartics2';
 <% } -%>
 
 import { environment } from '@env/environment';
@@ -99,7 +99,7 @@ export class AppComponent implements OnInit, OnDestroy {
         untilDestroyed(this)
       )
       .subscribe(event => {
-        const title = event.title;
+        const title = event['title'];
         if (title) {
           this.titleService.setTitle(this.translateService.instant(title));
         }

generators/app/templates/src/app/_app.module.ts

@@ -26,9 +26,6 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 <% if (props.angulartics) { -%>
 import { Angulartics2Module } from 'angulartics2';
 <% } -%>
-<% if (props.angulartics && props.analyticsProvider === 'ga') { -%>
-import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
-<% } -%>
 
 <% if (props.pwa) { -%>
 import { environment } from '@env/environment';

generators/app/templates/src/app/auth/__auth+bootstrap.login.component.html

@@ -22,7 +22,7 @@ <h4 class="card-title text-center">
                 <input type="text" class="form-control" formControlName="username" autocomplete="username"
                        [placeholder]="'Username' | translate"/>
                 <span hidden translate>Username</span>
-                <small [hidden]="loginForm.controls.username.valid || loginForm.controls.username.untouched"
+                <small [hidden]="loginForm.controls['username'].valid || loginForm.controls['username'].untouched"
                        class="text-danger" translate>
                   Username is required
                 </small>
@@ -31,7 +31,7 @@ <h4 class="card-title text-center">
                 <input type="password" class="form-control" formControlName="password" autocomplete="current-password"
                        [placeholder]="'Password' | translate" required/>
                 <span hidden translate>Password</span>
-                <small [hidden]="loginForm.controls.password.valid || loginForm.controls.password.untouched"
+                <small [hidden]="loginForm.controls['password'].valid || loginForm.controls['password'].untouched"
                        class="text-danger" translate>
                   Password is required
                 </small>

generators/app/templates/src/app/auth/__auth+ionic.login.component.html

@@ -21,14 +21,14 @@ <h6>v{{version}}</h6>
                 <ion-label color="medium" position="floating" translate>Username</ion-label>
                 <ion-input type="text" formControlName="username" autocomplete="username"></ion-input>
               </ion-item>
-              <ion-text color="danger" [hidden]="loginForm.controls.username.valid || loginForm.controls.username.untouched">
+              <ion-text color="danger" [hidden]="loginForm.controls['username'].valid || loginForm.controls['username'].untouched">
                 <span class="ion-padding" translate>Username is required</span>
               </ion-text>
               <ion-item lines="inset">
                 <ion-label color="medium" position="floating" translate>Password</ion-label>
                 <ion-input type="password" formControlName="password" autocomplete="current-password"></ion-input>
               </ion-item>
-              <ion-text color="danger" [hidden]="loginForm.controls.password.valid || loginForm.controls.password.untouched">
+              <ion-text color="danger" [hidden]="loginForm.controls['password'].valid || loginForm.controls['password'].untouched">
                 <span class="ion-padding" translate>Password is required</span>
               </ion-text>
               <ion-item class="ion-padding-top" lines="none">

generators/app/templates/src/app/auth/__auth+material.login.component.html

@@ -17,14 +17,14 @@ <h4 class="version">v{{version}}</h4>
           <mat-form-field [hideRequiredMarker]="true">
             <input type="text" matInput formControlName="username" autocomplete="username"
                    [placeholder]="'Username' | translate" required/>
-            <mat-error *ngIf="loginForm.controls.username.invalid && loginForm.controls.username.touched">
+            <mat-error *ngIf="loginForm.controls['username'].invalid && loginForm.controls['username'].touched">
               <span translate>Username is required</span>
             </mat-error>
           </mat-form-field>
           <mat-form-field [hideRequiredMarker]="true">
             <input type="password" matInput formControlName="password" autocomplete="current-password"
                    [placeholder]="'Password' | translate" required/>
-            <mat-error *ngIf="loginForm.controls.password.invalid && loginForm.controls.password.touched">
+            <mat-error *ngIf="loginForm.controls['password'].invalid && loginForm.controls['password'].touched">
               <span translate>Password is required</span>
             </mat-error>
           </mat-form-field>

generators/app/templates/src/app/auth/__auth+raw.login.component.html

@@ -14,7 +14,7 @@ <h1 translate>APP_NAME</h1>
           <input type="text" formControlName="username" autocomplete="username"
                  [placeholder]="'Username' | translate"/>
           <span hidden translate>Username</span>
-          <div [hidden]="loginForm.controls.username.valid || loginForm.controls.username.untouched"
+          <div [hidden]="loginForm.controls['username'].valid || loginForm.controls['username'].untouched"
                  class="invalid">
             <small translate>Username is required</small>
           </div>
@@ -23,7 +23,7 @@ <h1 translate>APP_NAME</h1>
           <input type="password" formControlName="password" autocomplete="current-password"
                  [placeholder]="'Password' | translate" required/>
           <span hidden translate>Password</span>
-          <div [hidden]="loginForm.controls.password.valid || loginForm.controls.password.untouched"
+          <div [hidden]="loginForm.controls['password'].valid || loginForm.controls['password'].untouched"
                  class="invalid">
             <small translate>Password is required</small>
           </div>