Merge pull request #945 from ghiscoding/chore/angular14

chore: upgrade project to latest Angular 14 and ng-packagr

Author: ghiscoding

angular.json

@@ -131,7 +131,6 @@
       }
     }
   },
-  "defaultProject": "angular-slickgrid",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
@@ -143,6 +142,8 @@
   },
   "cli": {
     "packageManager": "yarn",
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "allowedNonPeerDependencies": [
+    "."
+  ],
+  "dest": "dist",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

package.json

@@ -42,7 +42,7 @@
     "copy:lib": "cross-env copyfiles --up 2 src/assets/lib/** dist",
     "copy-demo:dist": "cross-env copyfiles --up 1 dist/**/*.* ../angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/angular-slickgrid",
     "del-demo:dist": "cross-env rimraf ../angular-slickgrid-demos/bootstrap3-demo-with-translate/node_modules/angular-slickgrid",
-    "packagr": "ng-packagr -p package.json",
+    "packagr": "ng-packagr -p ng-package.json",
     "changelog": "cross-env conventional-changelog -p angular -i doc/CHANGELOG.md -s",
     "bump-version": "npm --no-git-tag-version version",
     "prepare-release": "cross-env npm run changelog && npm run build && npm run doc",
@@ -63,16 +63,6 @@
     "type": "ko_fi",
     "url": "https://ko-fi.com/ghiscoding"
   },
-  "ngPackage": {
-    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-    "allowedNonPeerDependencies": [
-      "."
-    ],
-    "dest": "dist",
-    "lib": {
-      "entryFile": "src/public_api.ts"
-    }
-  },
   "dependencies": {
     "@slickgrid-universal/common": "1.3.0",
     "@slickgrid-universal/custom-footer-component": "1.3.0",
@@ -94,26 +84,26 @@
     "@ngx-translate/core": ">=14.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.8",
+    "@angular-devkit/build-angular": "^14.0.4",
     "@angular-eslint/builder": "^14.0.0",
     "@angular-eslint/eslint-plugin": "^14.0.0",
     "@angular-eslint/eslint-plugin-template": "^14.0.0",
     "@angular-eslint/schematics": "^14.0.0",
     "@angular-eslint/template-parser": "^14.0.0",
-    "@angular/animations": "^13.3.11",
-    "@angular/cli": "^13.3.8",
-    "@angular/common": "^13.3.11",
-    "@angular/compiler": "^13.3.11",
-    "@angular/compiler-cli": "^13.3.11",
-    "@angular/core": "^13.3.11",
-    "@angular/forms": "^13.3.11",
-    "@angular/language-service": "^13.3.11",
-    "@angular/platform-browser": "^13.3.11",
-    "@angular/platform-browser-dynamic": "^13.3.11",
-    "@angular/router": "^13.3.11",
+    "@angular/animations": "^14.0.4",
+    "@angular/cli": "^14.0.4",
+    "@angular/common": "^14.0.4",
+    "@angular/compiler": "^14.0.4",
+    "@angular/compiler-cli": "^14.0.4",
+    "@angular/core": "^14.0.4",
+    "@angular/forms": "^14.0.4",
+    "@angular/language-service": "^14.0.4",
+    "@angular/platform-browser": "^14.0.4",
+    "@angular/platform-browser-dynamic": "^14.0.4",
+    "@angular/router": "^14.0.4",
     "@faker-js/faker": "^7.3.0",
     "@fnando/sparkline": "^0.3.10",
-    "@ng-select/ng-select": "^8.3.0",
+    "@ng-select/ng-select": "^9.0.2",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@slickgrid-universal/composite-editor-component": "1.3.0",
@@ -128,19 +118,19 @@
     "@types/moment": "^2.13.0",
     "@types/node": "^18.0.0",
     "@types/text-encoding-utf-8": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
     "autoprefixer": "^10.4.7",
     "bootstrap": "^5.1.3",
     "conventional-changelog": "^3.1.25",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "custom-event-polyfill": "^1.0.7",
     "eslint": "^8.18.0",
-    "jest": "^28.1.1",
+    "jest": "^28.1.2",
     "jest-extended": "^2.0.0",
     "jest-preset-angular": "^12.1.0",
-    "ng-packagr": "^13.3.1",
+    "ng-packagr": "^14.0.2",
     "ngx-bootstrap": "^8.0.0",
     "npm-run-all2": "^6.0.1",
     "postcss": "^8.4.14",
@@ -151,7 +141,7 @@
     "stream-browserify": "^3.0.0",
     "ts-node": "^10.8.1",
     "tslib": "^2.4.0",
-    "typescript": "~4.4.4",
+    "typescript": "~4.7.4",
     "zone.js": "~0.11.6"
   },
   "engines": {
@@ -161,4 +151,4 @@
   "resolutions": {
     "caniuse-lite": "1.0.30001359"
   }
-}
+}

src/app/app.module.ts

@@ -86,90 +86,82 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
 
 // @dynamic
 @NgModule({
-  declarations: [
-    AppComponent,
-    CustomTitleFormatterComponent,
-    EditorNgSelectComponent,
-    FilterNgSelectComponent,
-    GridAddItemComponent,
-    GridAngularComponent,
-    GridAutoHeightComponent,
-    GridBasicComponent,
-    GridClientSideComponent,
-    GridColspanComponent,
-    GridCompositeEditorComponent,
-    GridContextMenuComponent,
-    GridCustomTooltipComponent,
-    GridDraggableGroupingComponent,
-    GridEditorComponent,
-    GridFormatterComponent,
-    GridFrozenComponent,
-    GridGraphqlComponent,
-    GridGraphqlWithoutPaginationComponent,
-    GridGroupingComponent,
-    GridHeaderButtonComponent,
-    GridHeaderMenuComponent,
-    GridLocalizationComponent,
-    GridMenuComponent,
-    GridOdataComponent,
-    GridRangeComponent,
-    GridRemoteComponent,
-    GridResizeByContentComponent,
-    GridRowDetailComponent,
-    GridRowMoveComponent,
-    GridRowSelectionComponent,
-    GridStateComponent,
-    GridTabsComponent,
-    GridTradingComponent,
-    GridTreeDataParentChildComponent,
-    GridTreeDataHierarchicalComponent,
-    RowDetailPreloadComponent,
-    RowDetailViewComponent,
-    SwtCommonGridTestComponent,
-    SwtCommonGridPaginationComponent,
-    SwtCommonGridComponent,
-    HomeComponent
-  ],
-  imports: [
-    AppRoutingRoutingModule,
-    BrowserModule,
-    FormsModule,
-    HttpClientModule,
-    NgSelectModule,
-    TabsModule.forRoot(),
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: (createTranslateLoader),
-        deps: [HttpClient]
-      }
-    }),
-    AngularSlickgridModule.forRoot({
-      // add any Global Grid Options/Config you might want
-      // to avoid passing the same options over and over in each grids of your App
-      enableAutoResize: true,
-      autoResize: {
-        container: '#grid-container',
-        rightPadding: 10
-      }
-    })
-  ],
-  entryComponents: [
-    // dynamically created components
-    CustomTitleFormatterComponent,
-    EditorNgSelectComponent,
-    FilterNgSelectComponent,
-    RowDetailPreloadComponent,
-    RowDetailViewComponent,
-  ],
-  providers: [
-    {
-      provide: APP_INITIALIZER,
-      useFactory: appInitializerFactory,
-      deps: [TranslateService, Injector],
-      multi: true
-    }
-  ],
-  bootstrap: [AppComponent]
+    declarations: [
+        AppComponent,
+        CustomTitleFormatterComponent,
+        EditorNgSelectComponent,
+        FilterNgSelectComponent,
+        GridAddItemComponent,
+        GridAngularComponent,
+        GridAutoHeightComponent,
+        GridBasicComponent,
+        GridClientSideComponent,
+        GridColspanComponent,
+        GridCompositeEditorComponent,
+        GridContextMenuComponent,
+        GridCustomTooltipComponent,
+        GridDraggableGroupingComponent,
+        GridEditorComponent,
+        GridFormatterComponent,
+        GridFrozenComponent,
+        GridGraphqlComponent,
+        GridGraphqlWithoutPaginationComponent,
+        GridGroupingComponent,
+        GridHeaderButtonComponent,
+        GridHeaderMenuComponent,
+        GridLocalizationComponent,
+        GridMenuComponent,
+        GridOdataComponent,
+        GridRangeComponent,
+        GridRemoteComponent,
+        GridResizeByContentComponent,
+        GridRowDetailComponent,
+        GridRowMoveComponent,
+        GridRowSelectionComponent,
+        GridStateComponent,
+        GridTabsComponent,
+        GridTradingComponent,
+        GridTreeDataParentChildComponent,
+        GridTreeDataHierarchicalComponent,
+        RowDetailPreloadComponent,
+        RowDetailViewComponent,
+        SwtCommonGridTestComponent,
+        SwtCommonGridPaginationComponent,
+        SwtCommonGridComponent,
+        HomeComponent
+    ],
+    imports: [
+        AppRoutingRoutingModule,
+        BrowserModule,
+        FormsModule,
+        HttpClientModule,
+        NgSelectModule,
+        TabsModule.forRoot(),
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: (createTranslateLoader),
+                deps: [HttpClient]
+            }
+        }),
+        AngularSlickgridModule.forRoot({
+            // add any Global Grid Options/Config you might want
+            // to avoid passing the same options over and over in each grids of your App
+            enableAutoResize: true,
+            autoResize: {
+                container: '#grid-container',
+                rightPadding: 10
+            }
+        })
+    ],
+    providers: [
+        {
+            provide: APP_INITIALIZER,
+            useFactory: appInitializerFactory,
+            deps: [TranslateService, Injector],
+            multi: true
+        }
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/modules/angular-slickgrid/modules/angular-slickgrid.module.ts

@@ -9,17 +9,16 @@ import { BsDropDownService } from '../services/bsDropdown.service';
 import { ContainerService } from '../services/container.service';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    TranslateModule
-  ],
-  declarations: [
-    AngularSlickgridComponent,
-  ],
-  exports: [
-    AngularSlickgridComponent,
-  ],
-  entryComponents: [AngularSlickgridComponent]
+    imports: [
+        CommonModule,
+        TranslateModule
+    ],
+    declarations: [
+        AngularSlickgridComponent,
+    ],
+    exports: [
+        AngularSlickgridComponent,
+    ]
 })
 export class AngularSlickgridModule {
   static forRoot(config: GridOption = {}): ModuleWithProviders<AngularSlickgridModule> {

tsconfig.json

@@ -14,7 +14,7 @@
     "noImplicitReturns": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2015",
+    "target": "es2020",
     "typeRoots": [
       "node_modules/@types",
       "typings"