feat(angular): update to angular 13 and enable tsconfig strict (#5231)

.gitignore

@@ -9,7 +9,7 @@ dist
 
 
 cypress/screenshots
-
+.angular
 # local env files
 .env.local
 .env.development.local

package.json

@@ -89,24 +89,25 @@
     "node": ">= 4.7.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.1",
-    "@angular/animations": "~12.2.1",
-    "@angular/cli": "~12.2.1",
-    "@angular/common": "~12.2.1",
-    "@angular/compiler": "~12.2.1",
-    "@angular/compiler-cli": "~12.2.1",
-    "@angular/core": "~12.2.1",
-    "@angular/forms": "~12.2.1",
-    "@angular/platform-browser": "~12.2.1",
-    "@angular/platform-browser-dynamic": "~12.2.1",
-    "@angular/platform-server": "~12.2.1",
-    "@angular/router": "~12.2.1",
+    "@angular-devkit/build-angular": "^13.0.1",
+    "@angular/animations": "~13.0.2",
+    "@angular/cli": "~13.0.1",
+    "@angular/common": "~13.0.2",
+    "@angular/compiler": "~13.0.2",
+    "@angular/compiler-cli": "~13.0.2",
+    "@angular/core": "~13.0.2",
+    "@angular/forms": "~13.0.2",
+    "@angular/platform-browser": "~13.0.2",
+    "@angular/platform-browser-dynamic": "~13.0.2",
+    "@angular/platform-server": "~13.0.2",
+    "@angular/router": "~13.0.2",
+    "@nguniversal/builders": "^13.0.1",
+    "@nguniversal/express-engine": "^13.0.1",
+    "ng-packagr": "^13.0.8",
     "@babel/cli": "^7.14.5",
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
-    "@nguniversal/builders": "^12.0.2",
-    "@nguniversal/express-engine": "^12.0.2",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.4.2",
@@ -143,7 +144,6 @@
     "is-ci-cli": "^2.2.0",
     "less": "^4.1.1",
     "lint-staged": "^11.0.0",
-    "ng-packagr": "^12.2.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.5",
     "prettier": "^2.3.1",
@@ -153,14 +153,14 @@
     "react-dom": "^17.0.2",
     "rollup": "^2.52.2",
     "rollup-plugin-svelte": "^7.1.0",
-    "rxjs": "~7.1.0",
+    "rxjs": "~7.4.0",
     "simple-git-hooks": "^2.4.1",
     "svelte": "^3.38.2",
     "terser": "^5.7.0",
     "ts-node": "~10.0.0",
     "tslib": "^2.3.0",
     "tslint": "~6.1.0",
-    "typescript": "^4.2.4",
+    "typescript": "^4.4.4",
     "vite": "^2.3.8",
     "vue": "^3.0.5",
     "zone.js": "~0.11.4"

playground/angular/src/app/home/home.component.ts

@@ -117,7 +117,8 @@ export class HomePage {
 
   slidesEx = ['first', 'second'];
 
-  onSlideChange(swiper: SwiperCore) {
+  onSlideChange(event: Parameters<SwiperEvents['slideChange']>) {
+    const [swiper] = event;
     if (swiper.isEnd) {
       // all swiper events are run outside of ngzone, so use ngzone.run or detectChanges to update the view.
       this.ngZone.run(() => {

src/angular/src/swiper.component.ts

@@ -29,6 +29,7 @@ import {
   ignoreNgOnChanges,
   coerceBooleanProperty,
   isShowEl,
+  isEnabled,
 } from './utils/utils';
 import {
   SwiperOptions,
@@ -662,10 +663,7 @@ export class SwiperComponent implements OnInit {
       if (swiperParams.loop) {
         swiperRef.loopedSlides = this.loopedSlides;
       }
-      const isVirtualEnabled =
-        typeof swiperRef.params.virtual !== 'undefined' &&
-        typeof swiperRef.params.virtual !== 'boolean' &&
-        swiperRef.params.virtual.enabled;
+      const isVirtualEnabled = isEnabled(swiperRef.params.virtual);
       if (swiperRef.virtual && isVirtualEnabled) {
         swiperRef.virtual.slides = this.slides;
         const extendWith = {
@@ -680,11 +678,8 @@ export class SwiperComponent implements OnInit {
 
       if (isPlatformBrowser(this._platformId)) {
         this.swiperRef = swiperRef.init(this.elementRef.nativeElement);
-        const isEnabled =
-          typeof this.swiperRef.params.virtual !== 'undefined' &&
-          typeof this.swiperRef.params.virtual !== 'boolean' &&
-          this.swiperRef.params.virtual.enabled;
-        if (this.swiperRef.virtual && isEnabled) {
+        const isVirtualEnabled = isEnabled(this.swiperRef.params.virtual);
+        if (this.swiperRef.virtual && isVirtualEnabled) {
           this.swiperRef.virtual.update(true);
         }
         this._changeDetectorRef.detectChanges();
@@ -724,7 +719,7 @@ export class SwiperComponent implements OnInit {
       this.swiperRef.updateSlides();
       this.swiperRef.updateProgress();
       this.swiperRef.updateSlidesClasses();
-      if (this.swiperRef.lazy && this.swiperRef.params.lazy['enabled']) {
+      if (isEnabled(this.swiperRef.params.lazy)) {
         this.swiperRef.lazy.load();
       }
       this.swiperRef.virtual.update(true);
@@ -863,7 +858,7 @@ export class SwiperComponent implements OnInit {
 
   calcLoopedSlides() {
     if (!this.loop) {
-      return;
+      return false;
     }
     let slidesPerViewParams = this.slidesPerView;
     if (this.breakpoints) {
@@ -881,7 +876,7 @@ export class SwiperComponent implements OnInit {
     let loopedSlides = this.loopedSlides || slidesPerViewParams;
     if (!loopedSlides) {
       // ?
-      return;
+      return false;
     }
 
     if (this.loopAdditionalSlides) {
@@ -891,24 +886,28 @@ export class SwiperComponent implements OnInit {
       loopedSlides = this.slides.length;
     }
     this.loopedSlides = loopedSlides;
-    return loopedSlides;
+    return true;
   }
 
   updateParameter(key: string, value: any) {
     if (!(this.swiperRef && !this.swiperRef.destroyed)) {
       return;
     }
-    const _key = key.replace(/^_/, '');
+    const _key = key.replace(/^_/, '') as keyof SwiperOptions;
     const isCurrentParamObj = isObject(this.swiperRef.params[_key]);
 
-    if (Object.keys(this.swiperRef.modules).indexOf(_key) >= 0) {
-      const defaultParams = this.swiperRef.modules[_key].params[_key];
-      if (isCurrentParamObj) {
-        extend(this.swiperRef.params[_key], defaultParams);
-      } else {
-        this.swiperRef.params[_key] = defaultParams;
-      }
-    }
+    // if (
+    //   Object.values(this.swiperRef.modules)
+    //     .map((module) => module.name?.toLowerCase())
+    //     .includes(_key)
+    // ) {
+    //   const defaultParams = this.swiperRef.originalParams[_key];
+    //   if (isCurrentParamObj) {
+    //     extend(this.swiperRef.params[_key], defaultParams);
+    //   } else {
+    //     this.swiperRef.params[_key] = defaultParams;
+    //   }
+    // }
     if (_key === 'enabled') {
       if (value === true) {
         this.swiperRef.enable();
@@ -920,7 +919,7 @@ export class SwiperComponent implements OnInit {
     if (isCurrentParamObj && isObject(value)) {
       extend(this.swiperRef.params[_key], value);
     } else {
-      this.swiperRef.params[_key] = value;
+      (this.swiperRef.params[_key] as any) = value;
     }
   }
   /**

src/angular/src/utils/utils.ts

@@ -7,6 +7,10 @@ export function isObject(o: any): boolean {
   );
 }
 
+export function isEnabled(val: boolean | { enabled?: boolean }) {
+  return typeof val !== 'undefined' && typeof val !== 'boolean' && val.enabled === true;
+}
+
 export function isShowEl(val: any, obj: any, el: any): boolean {
   return (
     (coerceBooleanProperty(val) === true && obj && !obj.el) ||

src/types/modules/lazy.d.ts

@@ -27,6 +27,10 @@ export interface LazyEvents {
 }
 
 export interface LazyOptions {
+  /**
+   * Whether the lazy loading images is enabled
+   */
+  enabled?: boolean;
   /**
    * Enables to check is the Swiper in view before lazy loading images on initial slides
    *

src/types/shared.d.ts

@@ -1,3 +1,5 @@
 export interface CSSSelector extends String {}
 
-export interface SwiperModule {}
+export interface SwiperModule {
+  name: string;
+}

tsconfig.json

@@ -3,20 +3,30 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "strictNullChecks": false,
+    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
-    "strict": false,
-    "strictPropertyInitialization": false,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2017",
     "module": "es2020",
-    "lib": ["es2018", "dom"],
+    "lib": ["es2020", "dom"],
     "paths": {
       "swiper": ["dist", "dist/swiper.esm.js"],
       "swiper/*": ["dist/*"]
     }
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }