Versions Compatibility Table

index

• Angular-Slickgrid & Slickgrid-Universal compatibility
• ngx-translate compatibility
• Build Warnings (Angular >=8.x)
• Angular >=12.x with WebPack 5 polyfill error

---

Angular-Slickgrid and Slickgrid-Universal

Whenever you want to update your Angular-Slickgrid, you should also always update all your Slickgrid-Universal packages (if any) at the same time as your Angular-Slickgrid and it should be all good. If you have problem with older versions, take a look at the list of compatible versions below.

Why do Angular-Slickgrid and Slickgrid-Universal versions have to go hand in hand?

It's not on purpose and I believe the biggest reason is because Angular-Slickgrid extends (GridOption) interface from Slickgrid-Universal and TypeScript seems to be detecting invalid types and throwing a bunch of errors when they're not updated on the same day, I never figured out a way to avoid these TypeScript errors (if you know how, please provide a PR).

Angular-Slickgrid	Slickgrid-Universal	Angular requirement	Migration Guide	Release Date
8.7.0	5.7.0
8.6.1	5.6.1
8.5.2	5.5.2
8.4.0	5.4.0
8.3.2	5.3.4
8.2.0	5.2.0
8.1.0	5.1.0
8.0.0	5.0.1	18+	Migration Guide to v8.x	2024-05-22
7.7.0	4.7.0
7.6.1	4.6.1
7.5.0	4.5.0
7.4.1	4.4.1
7.3.0	4.3.0
7.2.0	4.2.0
7.1.0	4.1.0
7.0.3	4.0.3	17+	Migration Guide to v7.x	2023-12-15
6.6.5	3.7.2
6.6.2	3.6.0
6.5.1	3.5.1
6.4.0	3.4.2
6.3.1	3.3.2
6.1.0	3.1.0
6.0.1	3.0.1	16+	Migration Guide to v6.x	2023-07-01
5.6.4	2.6.4
5.5.1	2.5.0
5.4.1	2.4.1
5.3.0	2.3.0
5.2.2	2.2.2
5.1.3	2.1.3
5.1.1	2.1.1
5.0.2	2.0.0	14+	Migration Guide to v5.x	2022-10-17
4.3.1	1.4.0
4.2.7	1.3.7
4.1.4	1.2.6
4.0.0	1.1.1	13+	Migration Guide to v4.x	2021-12-11
3.3.2	0.19.2	12+	Migration Guide to v3.x	2021-07-02

ngx-translate Compatibility

If you are facing any issues with ngx-translate library while building your Angular Project. You need to make sure that @ngx-translate/core version matches with the expected Angular version as shown below. Note that even if you use a single Locale, ngx-translate will still need to be installed down the scene because we use @Optional() TranslateService in the lib and for that to work, it requires the optional dependency to be installed nonetheless for compilation, but don't worry it should still be removed by the tree shaking process after running a production build. See their version compatibility table below

Angular Version	@ngx-translate/core
13+ (Ivy only)	14+
10-13	13+
8-9	12+
7	11+

---

ngcc Build Warnings (Angular >=8.0 && <16.0)

You might get warnings about SlickGrid while doing a production build, most of them are fine and the best way to fix them, is to simply remove/ignore the warnings, all you have to do is to add a file named ngcc.config.js in your project root (same location as the angular.json file) with the following content (you can also see this commit which fixes the Angular-Slickgrid-Demos prod build):

module.exports = {
  packages: {
    'angular-slickgrid': {
      ignorableDeepImportMatchers: [
        /assign-deep/,
        /dequal/,
        /slickgrid\//,
        /flatpickr/,
      ]
    },
  }
};

Angular 12 with WebPack 5 - how to fix polyfill error

Since Angular 12 switched to WebPack 5, you might get some new errors and you will need to add some polyfills manually to get the Excel Builder (Excel Export) to work.

The error you might get

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

Steps to fix it

1. npm install stream-browserify
2. Add a path mapping in tsconfig.json:

{
  ...
  "compilerOptions": {
    "paths": {
      "stream": [ "./node_modules/stream-browserify" ]
    },

3. Add stream (and any other CJS deps) to allowedCommonJsDependencies in your angular.json config:

"options": {
  "allowedCommonJsDependencies": [
    "fetch-jsonp",
    "stream"
  ],
],

strictTemplates error

In Angular 14 and higher, Angular has a strictTemplates flag in your tsconfig.json file (enabled by default when creating new projects from CLI) which causes issues with Angular-Slickgrid events with errors similar to this:

Property 'detail' does not exist on type 'Event'. (onAngularGridCreated)="angularGridReady($event.detail)"

The reason is because Angular-Slickgrid uses Custom Event for all its events and Angular complains because these Custom Events aren't typed. In order to fix this issue, you have 3 viable approaches:

1. disabled strictTemplates in your tsconfig.json config
2. cast the event in the View template to $any type
   • $any($event) for example $any($event).detail.eventData
3. cast the event in the component ViewModel to CustomEvent

<angular-slickgrid gridId="grid28"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset"
    (onAngularGridCreated)="angularGridReady($event.detail)">
</angular-slickgrid>

angularGridReady(event: CustomEvent<AngularGridInstance>) {
  this.angularGrid = event.detail;
  this.gridObj = this.angularGrid.slickGrid;
}

The simplest is obviously the option 1 but you lose the strictness on the view templates, more details can found under the discussion (strictTemplates) Template error , I have also opened a similar Stack Overflow question myself: How to use Custom Event (not Event Emitter) without strictTemplates to complain about $event not being a Custom Event type?.