Merge pull request #857 from ghiscoding/feat/angular13

BREAKING CHANGE: upgrade Angular 13 using Ivy build without UMD bundles
ghiscoding · Nov 22, 2021 · 9774b80 · 9774b80
2 parents 64c4b7e + 5659890
commit 9774b80
Show file tree

Hide file tree

Showing 14 changed files with 1,885 additions and 3,193 deletions.
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@
 .chrome
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

diff --git a/angular.json b/angular.json
@@ -6,7 +6,7 @@
     "angular-slickgrid": {
       "root": "",
       "sourceRoot": "src",
-      "projectType": "application",
+      "projectType": "library",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -119,84 +119,6 @@
             }
           }
         },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "angular-slickgrid:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.css",
-              "node_modules/font-awesome/css/font-awesome.css",
-              "node_modules/flatpickr/dist/flatpickr.css",
-              "src/assets/lib/multiple-select/multiple-select.css",
-              "node_modules/@ng-select/ng-select/themes/default.theme.css",
-              "src/styles.scss",
-              "src/slickgrid-styles.scss"
-            ],
-            "scripts": [
-              "node_modules/jquery/dist/jquery.js",
-              "node_modules/jquery-ui-dist/jquery-ui.min.js",
-              "node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
-              "node_modules/bootstrap/dist/js/bootstrap.js",
-              "src/assets/lib/multiple-select/multiple-select.js"
-            ],
-            "assets": [
-              "src/assets",
-              "src/favicon.ico",
-              {
-                "glob": "**/*",
-                "input": "src/assets/i18n",
-                "output": "/assets/i18n"
-              },
-              {
-                "glob": "*",
-                "input": "src/assets/i18n",
-                "output": "/assets/i18n"
-              },
-              {
-                "glob": "*/",
-                "input": "src/assets/i18n",
-                "output": "/assets/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "src/assets/i18n",
-                "output": "/assets/i18n"
-              }
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
-          }
-        }
-      }
-    },
-    "angular-slickgrid-e2e": {
-      "root": "e2e",
-      "sourceRoot": "e2e",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "angular-slickgrid:serve"
-          }
-        },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
@@ -220,6 +142,7 @@
     }
   },
   "cli": {
+    "packageManager": "yarn",
     "defaultCollection": "@angular-eslint/schematics"
   }
 }
diff --git a/package.json b/package.json
@@ -66,20 +66,7 @@
     ],
     "dest": "dist",
     "lib": {
-      "entryFile": "src/public_api.ts",
-      "umdModuleIds": {
-        "@ngx-translate/core": "ngx-translate-core",
-        "@ngx-translate/core/index": "ngx-translate-core",
-        "assignDeep": "assign-deep",
-        "dequal": "dequal",
-        "dequal-lite": "dequal-lite",
-        "dompurify": "dompurify",
-        "excel-builder-webpacker": "excelBuilderWebpacker",
-        "flatpickr": "flatpickr",
-        "jquery": "jquery",
-        "moment-mini": "moment",
-        "text-encoding-utf-8": "textEncodingUtf8"
-      }
+      "entryFile": "src/public_api.ts"
     }
   },
   "dependencies": {
@@ -100,45 +87,42 @@
     "rxjs": ">=7.0.0"
   },
   "peerDependencies": {
-    "@angular/core": ">=12.1.2",
-    "@ngx-translate/core": ">=13.0.0",
-    "@ngx-translate/http-loader": ">=6.0.0",
-    "typescript": ">=4.3.5"
+    "@ngx-translate/core": ">=14.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.13",
-    "@angular-eslint/builder": "12.6.1",
-    "@angular-eslint/eslint-plugin": "12.6.1",
-    "@angular-eslint/eslint-plugin-template": "12.6.1",
-    "@angular-eslint/schematics": "12.6.1",
-    "@angular-eslint/template-parser": "12.6.1",
-    "@angular/animations": "^12.2.13",
-    "@angular/cli": "^12.2.13",
-    "@angular/common": "^12.2.13",
-    "@angular/compiler": "^12.2.12",
-    "@angular/compiler-cli": "^12.2.13",
-    "@angular/core": "^12.2.13",
-    "@angular/forms": "^12.2.13",
-    "@angular/language-service": "^12.2.13",
-    "@angular/platform-browser": "^12.2.13",
-    "@angular/platform-browser-dynamic": "^12.2.13",
-    "@angular/router": "^12.2.13",
-    "@ng-select/ng-select": "^7.4.0",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
+    "@angular-devkit/build-angular": "~13.0.3",
+    "@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/animations": "^13.0.2",
+    "@angular/cli": "^13.0.3",
+    "@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/language-service": "^13.0.2",
+    "@angular/platform-browser": "^13.0.2",
+    "@angular/platform-browser-dynamic": "^13.0.2",
+    "@angular/router": "^13.0.2",
+    "@ng-select/ng-select": "^8.1.1",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
     "@slickgrid-universal/composite-editor-component": "^0.19.2",
     "@slickgrid-universal/custom-tooltip-plugin": "^0.19.2",
     "@slickgrid-universal/excel-export": "^0.19.2",
     "@slickgrid-universal/graphql": "^0.19.2",
     "@slickgrid-universal/odata": "^0.19.2",
     "@slickgrid-universal/text-export": "^0.19.2",
     "@types/flatpickr": "^3.1.2",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^27.0.3",
     "@types/moment": "^2.13.0",
-    "@types/node": "^16.11.7",
+    "@types/node": "^16.11.9",
     "@types/text-encoding-utf-8": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "autoprefixer": "^10.4.0",
     "bootstrap": "^5.1.3",
     "codecov": "^3.8.3",
@@ -149,11 +133,11 @@
     "custom-event-polyfill": "^1.0.7",
     "del": "^6.0.0",
     "del-cli": "^4.0.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.2.0",
     "jest": "^27.3.1",
     "jest-extended": "^1.1.0",
-    "jest-preset-angular": "^10.1.0",
-    "ng-packagr": "^12.2.5",
+    "jest-preset-angular": "^11.0.0",
+    "ng-packagr": "^13.0.6",
     "ngx-bootstrap": "^7.1.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.11",
@@ -166,12 +150,12 @@
     "stream-browserify": "^3.0.0",
     "ts-node": "^10.4.0",
     "tslib": "^2.3.1",
-    "typescript": "~4.3.5",
+    "typescript": "~4.4.4",
     "yargs": "^17.2.1",
     "zone.js": "~0.11.4"
   },
   "engines": {
-    "node": ">=14.15.0",
+    "node": ">=14.17.0",
     "npm": ">=6.14.8"
   }
-}
+}
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -10,7 +10,8 @@ describe('AppComponent', () => {
         AppComponent
       ],
       providers: [],
-      imports: [RouterTestingModule]
+      imports: [RouterTestingModule],
+      teardown: { destroyAfterEach: false }
     }).compileComponents();
   });
 

diff --git a/src/app/examples/rowdetail-view.component.html b/src/app/examples/rowdetail-view.component.html
@@ -3,7 +3,7 @@ <h3>{{model?.title}}</h3>
   <div class="row">
     <div class="col-3"><label>Assignee:</label> <input class="form-control" [(ngModel)]="model.assignee" /></div>
     <div class="col-3"><label>Reporter:</label> <span>{{model?.reporter}}</span></div>
-    <div class="col-2"><label>Duration:</label> <span>{{model?.duration}}</span></div>
+    <div class="col-2"><label>Duration:</label> <span>{{model?.duration |  number : '1.2-2'}}</span></div>
     <div class="col-2"><label>% Complete:</label> <span>{{model?.percentComplete}}</span></div>
   </div>
 

diff --git a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts
@@ -347,8 +347,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
     sharedService = new SharedService();
     translaterService = new TranslaterServiceStub();
     await TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()]
-    });
+    imports: [TranslateModule.forRoot()],
+    teardown: { destroyAfterEach: false }
+});
     translate = TestBed.inject(TranslateService);
 
     mockChangeDetectorRef = {

diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/rowDetailViewExtension.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/rowDetailViewExtension.spec.ts
@@ -124,7 +124,8 @@ describe('rowDetailViewExtension', () => {
         { provide: RxJsFacade, useValue: rxjsResourceStub },
         { provide: SortService, useValue: sortServiceStub },
       ],
-      imports: [TranslateModule.forRoot()]
+      imports: [TranslateModule.forRoot()],
+      teardown: { destroyAfterEach: false }
     });
     extension = TestBed.inject(RowDetailViewExtension);
   });

diff --git a/src/app/modules/angular-slickgrid/services/__tests__/angularUtilService.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/angularUtilService.spec.ts
@@ -40,7 +40,8 @@ describe('AngularUtilService', () => {
         { provide: ApplicationRef, useValue: applicationRefStub },
         { provide: ComponentFactoryResolver, useValue: componentFactoryResolverStub },
         { provide: Injector, useValue: injectorStub },
-      ]
+      ],
+      teardown: { destroyAfterEach: false }
     });
     fixture = TestBed.createComponent(TestPreloadComponent);
     component = fixture.componentInstance;

diff --git a/src/app/modules/angular-slickgrid/services/__tests__/bsDropdown.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/bsDropdown.service.spec.ts
@@ -49,7 +49,8 @@ describe('bsdropdown-service', () => {
       providers: [
         BsDropDownService,
         { provide: AngularUtilService, useValue: angularUtilServiceStub },
-      ]
+      ],
+      teardown: { destroyAfterEach: false }
     });
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;

diff --git a/src/app/modules/angular-slickgrid/services/__tests__/translater.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/translater.service.spec.ts
@@ -10,7 +10,8 @@ describe('Translater Service', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()]
+      imports: [TranslateModule.forRoot()],
+      teardown: { destroyAfterEach: false }
     });
     translate = TestBed.inject(TranslateService);
     service = new TranslaterService(translate);

diff --git a/src/polyfills.ts b/src/polyfills.ts
@@ -22,23 +22,13 @@
 /** IE11 was throwing console errors without these (cannot find "includes") */
 // import 'core-js/es7/array';
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
 /** Evergreen browsers require these. **/
 // import 'core-js/es6/reflect';
 
 /** Support Custom Event */
 import 'custom-event-polyfill'; // npm install custom-event-polyfill
 
 
-/**
- * Required to support Web Animations `@angular/animation`.
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
 
 /***************************************************************************************************
  * Zone JS is required by Angular itself.

diff --git a/test/cypress/package.json b/test/cypress/package.json
@@ -10,8 +10,8 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^8.7.0",
+    "cypress": "^9.0.0",
     "mocha": "^9.1.3",
-    "mochawesome": "^6.3.1"
+    "mochawesome": "^7.0.1"
   }
 }