Remove devextreme license banner

Question

Our company currently holds an active subscription to the DevExtreme suite, and we've correctly integrated the license key into our Angular project using Visual Studio Code. However, we are still seeing the banner indicating that the product is in evaluation mode. We are using DevExtreme version v24.1.7, and this is how we've added the license key in the code:

export const environment = {
  production: false,
  dxLicenseKey: 'ourLicense'
};

In the app.component.ts, we have the following:

constructor() {
     config({ licenseKey: environment.dxLicenseKey });
}

Despite this, the banner still says: "For evaluation purposes only. Redistribution prohibited. Please [purchase a license] to continue using DevExpress product libraries (v24.1.7)." I came across a post where a DevExtreme supporter suggested using the following approach:

DevExpress.config({ licenseKey: 'your license key' });

However, this approach doesn't work for me because DevExpress is always undefined.

Answer 1

You can just use the below code, which directly accesses the environment.ts and fetches the license key:

main.ts

...
import { environment } from 'environments/environment';
import config from 'devextreme/core/config';
    
config({ licenseKey: environment.dxLicenseKey } as any);
...

---

OR

---

In your src folder, create a file like below.

devextreme-license.ts

export const licenseKey = 'license here!';

Then in your main.ts include the below code, this will register the license on application start.

main.ts

...
import { licenseKey } from './devextreme-license';
import config from 'devextreme/core/config';
    
config({ licenseKey } as any);
...

DevExtreme Angular - Licensing