fix(deps): downgrade to Angular 13 to avoid breaking changes, fixes #994

- fixes #994
- we will update to newer version of Angular only on the next major version (which is currently in WIP) to avoid breaking users with Angular 13

Author: ghiscoding

.github/renovate.json5

@@ -26,5 +26,27 @@
     }
   ],
   schedule: ['on Thursday'],
-  ignoreDeps: ['typescript'],
+  ignoreDeps: [
+    // ignore any of the packages related to Angular major versions, since we will update them manually
+    '@angular-devkit/build-angular',
+    '@angular-eslint/builder',
+    '@angular-eslint/eslint-plugin',
+    '@angular-eslint/eslint-plugin-template',
+    '@angular-eslint/schematics',
+    '@angular-eslint/template-parser',
+    '@angular/animations',
+    '@angular/cli',
+    '@angular/common',
+    '@angular/compiler',
+    '@angular/compiler-cli',
+    '@angular/core',
+    '@angular/forms',
+    '@angular/language-service',
+    '@angular/platform-browser',
+    '@angular/platform-browser-dynamic',
+    '@angular/router',
+    '@ng-select/ng-select',
+    'ngx-bootstrap',
+    'typescript'
+  ],
 }

angular.json

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

package.json

@@ -84,26 +84,26 @@
     "@ngx-translate/core": ">=14.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.1.2",
+    "@angular-devkit/build-angular": "~13.3.8",
     "@angular-eslint/builder": "^14.0.2",
     "@angular-eslint/eslint-plugin": "^14.0.2",
     "@angular-eslint/eslint-plugin-template": "^14.0.2",
     "@angular-eslint/schematics": "^14.0.2",
     "@angular-eslint/template-parser": "^14.0.2",
-    "@angular/animations": "^14.1.2",
-    "@angular/cli": "^14.1.2",
-    "@angular/common": "^14.1.2",
-    "@angular/compiler": "^14.1.2",
-    "@angular/compiler-cli": "^14.1.2",
-    "@angular/core": "^14.1.2",
-    "@angular/forms": "^14.1.2",
-    "@angular/language-service": "^14.1.2",
-    "@angular/platform-browser": "^14.1.2",
-    "@angular/platform-browser-dynamic": "^14.1.2",
-    "@angular/router": "^14.1.2",
+    "@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",
     "@faker-js/faker": "^7.4.0",
     "@fnando/sparkline": "^0.3.10",
-    "@ng-select/ng-select": "^9.0.2",
+    "@ng-select/ng-select": "^8.3.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@slickgrid-universal/composite-editor-component": "~1.4.0",
@@ -130,8 +130,8 @@
     "jest": "^28.1.3",
     "jest-extended": "^3.0.2",
     "jest-preset-angular": "^12.2.0",
-    "ng-packagr": "^14.1.0",
-    "ngx-bootstrap": "^9.0.0",
+    "ng-packagr": "^13.3.1",
+    "ngx-bootstrap": "^8.0.0",
     "npm-run-all2": "^6.0.1",
     "postcss": "^8.4.16",
     "postcss-cli": "^10.0.0",
@@ -141,7 +141,7 @@
     "stream-browserify": "^3.0.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.0",
-    "typescript": "~4.7.4",
+    "typescript": "~4.4.4",
     "zone.js": "~0.11.7"
   },
   "engines": {

src/app/app.module.ts

@@ -86,82 +86,90 @@ 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
-            }
-        })
-    ],
-    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
+      }
+    })
+  ],
+  entryComponents: [
+    // dynamically created components
+    CustomTitleFormatterComponent,
+    EditorNgSelectComponent,
+    FilterNgSelectComponent,
+    RowDetailPreloadComponent,
+    RowDetailViewComponent,
+  ],
+  providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appInitializerFactory,
+      deps: [TranslateService, Injector],
+      multi: true
+    }
+  ],
+  bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule { }

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

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

tsconfig.json

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