Installing AdapTable Angular

Summary

  • AdapTable Angular is installed from a public npm Registry

Public npm Registry

This page describes how to install AdapTable Angular 18 from the public npm Registry.

Find Out More

Developer Guide

Installing AdapTable Angular

To install AdapTable Angular follow these steps:

Terminal
npm install @adaptabletools/adaptable-angular-aggrid
1
Install the adaptable-angular-aggrid package from npm

Use the npm install commmand

Note

There is no need to install the AdapTable vanilla package

Terminal
npm i @adaptabletools/adaptable-plugin-master-detail-aggrid
2
Install any AdapTable Plugins that are required

For example to use Master-Detail functionality add:

Hint

Plugins reduce download size by placing less frequently used functionality outside the main download

Terminal
npm i @angular/common npm i @angular/core
3
Install Angular Peer Dependencies

The currently required Angular peer dependencies are:

  • @angular/common >= 18.0.0
  • @angular/core >= 18.0.0

Note

The Minimum Version of Angular supported by AdapTable is 18

Terminal
npm install ag-grid-angular npm install ag-grid-enterprise
4
Install AG Grid Angular and Enterprise

Install the AG Grid Angular and Enterprise packages (version 35.2 or later)

Terminal
npm install ag-charts-enterprise
5
Install AG Grid Charting (optional)

If you plan to use AG Grid Charts, or AdapTable's Sparkline Columns, additionally install the AG Charts package.

const adaptableOptions: AdaptableOptions = {
  licenseKey: '<ADAPTABLE_LICENSE_KEY_HERE>',
};
6
Set the AdapTable License

This is done via the licenseKey property in Adaptable Options

CJS

AdapTable Angular is packaged using the standard Angular package format.

Since Angular v13 this is not available in CJS format.

This means that unlike AdapTable's Vanilla, React and Vue versions, AdapTable Angular is only available in ESM.

Hint

  • You might need the CJS format or to use third party libraries that require the CJS format (e.g. Jest)
  • In this use case, you will need to use some additional build tools/libraries to overcome this Angular limitation

CommonJS Build Warnings

When building an Angular application which uses AdapTable, you may see warnings like:

[WARNING] Module 'react' used by 'node_modules/@adaptabletools/adaptable/...' is not ESM
CommonJS or AMD dependencies can cause optimization bailouts

These warnings are emitted by all Angular builders — both the esbuild-based ones (@angular/build:application, @angular-devkit/build-angular:browser-esbuild) and the older webpack-based one (@angular-devkit/build-angular:browser, where the message reads '...' depends on 'react' instead).

These warnings refer to React ecosystem packages used internally by AdapTable (react, react-dom, and the transitive dependency use-sync-external-store). These packages are published as CommonJS only — no ESM distribution exists — so the warnings cannot be avoided at the package level.

Note

The warnings are harmless: the build output is correct, and the "optimization bailout" only means the bundler cannot tree-shake inside those specific modules (which would have no effect on React's monolithic runtime anyway)

To silence the warnings, add the packages to the allowedCommonJsDependencies build option — in angular.json, or in project.json if you are using an Nx monorepo:

{
  "targets": {
    "build": {
      "executor": "@angular/build:application",
      "options": {
        "allowedCommonJsDependencies": [
          "react",
          "react-dom",
          "use-sync-external-store"
        ]
      }
    }
  }
}

Hint

Listing a package name also covers its deep imports (e.g. react/jsx-runtime, react-dom/client, use-sync-external-store/shim), so these three entries are sufficient

PreviousKey ConceptsNextIntegration