How to migrate Ag-Grid from version 21 to version 22 in Angular 8

Question

In version 22, Ag-grid radically changed their code so its now deployed in modules, primarily from two new packages @ag-grid-community/all-modules or @ag-grid-enterprise/all-modules. The documentation on their website is wholly unclear as to how to migrate successfully to the new version 22. Especially for Angular apps. Even the code examples don't work (they reference an unknown module @ag-grid-community/angular).

Does anyone know how to migrate Ag-Grid from version 21 to version 22 in Angular 8? Any info on the doing for the enterprise version also welcome.

Piffle

Install on npm ag-grid-angular, ag-grid-community, ag-grid-enterprise, and @ag-grid-enterprise/all-modules. Import AgGridModule from ag-grid-angular in your parent module. Then in your individual components where you use agGrid just import the interfaces (like GridOptions, AllModules, etc.) from @ag-grid-enterprise/all-modules. I'm using 22.1.1 enterprise with Angular 8.2.0 currently and it's what I'm doing. I had to uninstall all ag grid libraries before to get it working properly. Make sure all the installed packages are the same version as well. – Salvo

Thank you nullptr - I'll give that a go and report back. I just thought all that was needed was @ag-grid-enterprise/all-modules! – Piffle

Answer 1

If you still want to use all modules and angular, the setup is as follows:

Adding Ag-Grid dependency:

• Remove all your current aggrid dependencies.
• If you want to use community only, simly add @ag-grid-community/all-modules
• If you want to use enterprise, just add @ag-grid-enterprise/all-modules, no need to add community dependency as it is already included in the enterprise one

Adding Angular grid dependency

Instead of the old ag-grid-angular, you should now use @ag-grid-community/angular

So now, all your dependencies should look something like this, if using enterprise:

"@ag-grid-community/angular": "^22.1.2",
"@ag-grid-enterprise/all-modules": "^22.1.2",

Registering modules

Now it's time to configure what modules your grids will use. You can configure it per grid or globally.

You can register globally all the modules to all the grids in your app.module.ts:

import {ModuleRegistry, AllModules} from '@ag-grid-enterprise/all-modules';


export class AppModule {


  constructor() {
    ModuleRegistry.registerModules(AllModules);
  }
}

Changing imports

Now make sure to fix all your imports from the old packages to the new ones.

Eg.

import {AgGridAngular} from "ag-grid-angular"; 

becomes

import {AgGridAngular} from "@ag-grid-community/angular";

Updating CSS imports

You need to make sure all your CSS imports are updated to the new package system.

For example, this:

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
@import "~ag-grid-community/dist/styles/ag-theme-blue.css";

Becomes this:

@import "~@ag-grid-community/all-modules/dist/styles/ag-grid.css";
@import "~@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css";
@import "~@ag-grid-community/all-modules/dist/styles/ag-theme-blue.css";

For More info check ag-Grid Modules: Migrating

Acro

Vojtech Ruzicha - thank you so much for this detailed answer - much better than the docs!! – Piffle

Just implemented the above steps - and confirm they really work - awesome stuff :) – Piffle

I followed exact same steps but still ran into error "ag-grid-angular is not a known element". Can anyone please help? – Discountenance

Nevermind, I fixed it by importing AgGridModule from "@ag-grid-community/angular" and then adding following line to imports array in the main module "AgGridModule.withComponents()" – Discountenance

I was going through this, and I did an npm i @ag-grid-enterprise/all-modules @ag-grid-enterprise/angular. But I wasn't able to import {ModuleRegistry, AllModules} from '@ag-grid-enterprise/all-modules'; The AllModules isn't found. So not sure if there's a difference. But looking at ag-grid.com/javascript-grid-modules/#all-modules-bundles looks like if you install @ag-grid-community then you dont need to register them. Hope this helps – Hypanthium