The Angular2 project using ag-grid-enterprise is currently experiencing difficulties with implementing the License Key

I have a valid license for the ag-grid-enterprise version, but I'm struggling with how to integrate it into my Angular2 project.

I've attempted placing the license in the main.ts file using LicenseManager and specifying the enterprise version in package.json and systemjs.config.json

However, I keep encountering an error:

systemjs.config.js:

'ag-grid': 'node_modules/ag-grid',
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
'ag-grid-enterprise': 'node_modules/ag-grid-enterprise'
'ag-grid': {
   defaultExtension: "js"
 },
 'ag-grid-ng2': {
   defaultExtension: "js"
 },
 'ag-grid-enterprise': {
   defaultExtension: "js"
 }

Package.json

"dependencies": {
    "ag-grid": "7.1.x",
    "ag-grid-enterprise": "7.1.x",
    "ag-grid-ng2": "7.1.x",

    "@angular/common": "2.4.x",
    "@angular/compiler": "2.4.x",
    "@angular/compiler-cli": "2.4.x",
    "@angular/core": "2.4.x",
    "@angular/http": "2.4.x",
    "@angular/forms": "2.4.x",
    "@angular/platform-browser": "2.4.x",
    "@angular/platform-browser-dynamic": "2.4.x",
    "@angular/platform-server": "2.4.x",
    "@angular/router": "3.4.x",
    "rxjs": "5.0.x",
    "zone.js": "0.7.x",
    "core-js": "2.4.x",
    "systemjs": "0.19.27",
    "bootstrap": "3.3.6",
    "jquery": "3.1.1"
  },
  "devDependencies": {
    "@types/node": "6.0.45",
    "concurrently": "2.2.0",
    "typescript": "2.0.3",
    "rimraf": "2.5.x",
    "gulp": "3.9.1",
    "lite-server": "2.2.2",
    "systemjs-builder": "0.15.33",
    "copyfiles": "1.0.x",
    "ncp": "2.0.x",

    "@types/selenium-webdriver": "2.53.33",
    "http-server": "^0.9.0",
    "canonical-path": "0.0.2",
    "jasmine-core": "2.4.1",
    "karma": "1.3.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-systemjs": "0.16.0",
    "protractor": "4.0.13",
    "webdriver-manager": "10.2.5"
  }

main.ts

import {LicenseManager} from "ag-grid-enterprise/main";
LicenseManager.setLicenseKey("your license key");

"Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ag-grid at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1039:29) [] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ => ] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:345:33) [] Error loading http://localhost:3000/node_modules/ag-grid as "ag-grid" from http://localhost:3000/node_modules/ag-grid-enterprise/dist/lib/menu/enterpriseMenu.js at addToError (http://localhost:3000/node_modules/systemjs/dist/system.src.js:123:78) [] at linkSetFailed (http://localhost:3000/node_modules/systemjs/dist/system.src.js:726:21) [] at http://localhost:3000/node_modules/systemjs/dist/system.src.js:522:9 [] at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:113:43) [ => ] at http://localhost:3000/node_modules/zone.js/dist/zone.js:535:57 [] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ => ] at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:433:35) [] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:349:25) []"

angulartypescriptag-grid

Answer №1

Ensure you are referencing the correct ag-grid main JavaScript file

System.config({
    defaultJSExtensions: true,
    map: {
        // import angular libraries

        // include ag-grid libraries
        'ag-grid-ng2': 'node_modules/ag-grid-ng2',
        'ag-grid': 'node_modules/ag-grid',
        'ag-grid-enterprise': 'node_modules/ag-grid-enterprise'
    },
    packages: {
       // add necessary code...
       'ag-grid': {
            main: 'main.js' // point to main js file
        }
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Blending Angular5 and AngularJS in Polymer

We are considering launching two new projects - one using Angular 5 and the other utilizing Polymer. The second project is intended to serve as a component library for reuse in not only the Angular 5 project but also in other AngularJS projects. After res ...

javascriptangularjsangularpolymer

unexpected behavior with the mat-checkbox control

Using mat-checkbox within an Angular application has brought up a global issue for me. I have a formGroup with a mat-checkbox and a text input field. Upon clicking the mat-checkbox, a new FormGroup is instantiated with the same fields as before, along with ...

angularcheckboxangular-material

Emphasize the interactions within the table cells based on their corresponding column and row

I'm looking to achieve a specific interaction in my Angular Material table. I want to highlight the table cell interactions with column and row by extending the highlighting up to the column header and left to the row header. Is this something that ca ...

htmlcssangularangular-material

The Angular template driven forms are flagging as invalid despite the regExp being a match

My input looks like this: <div class="form-group"> <label for="power">Hero Power</label> <input [(ngModel)]="model.powerNumber" name="powerNumber" type="text" class="form-control" pattern="^[0-9]+$"id= ...

javascripthtmlregexangular

Error message shows explicit Typescript type instead of using generic type name

I am looking to use a more explicit name such as userId instead of the type number in my error message for error types. export const primaryKey: PrimaryKey = `CONSUMPTION#123a4`; // The error 'Type ""CONSUMPTION#123a4"" is not assignable to ...

typescripttypes

Encountered a problem with regular expressions in Angular 2 - a Module parse error due to an octal literal in strict mode

Greetings, I have encountered an issue with a regular expression in my environment.ts file. export const environment = { passwordPolicy: "^(?!.*(.)\1\1)(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}.*$" }; Unfortunately, whe ...

angulartypescript

Having trouble sending a x-www-form-urlencoded POST request in Angular?

Despite having a functional POST and GET service with no CORS issues, I am struggling to replicate the call made in Postman (where it works). The only thing I can think of is that I may have incorrectly set the format as x-www-form-urlencoded. When searchi ...

angulartypescriptpostangular-httpclientangular12

Does anyone have experience using the useRef hook in React?

Can someone help me with this recurring issue: "Property 'value' does not exist on type 'never'" interface InputProps { name: string; icon?: ReactElement; placeholder?: string; } const Input = ({ name, icon: Icon, ...rest }: Inpu ...

reactjstypescript

Blurry text issue observed on certain mobile devices with Next.js components

There continues to be an issue on my NextJS page where some text appears blurry on certain mobile devices, particularly iPhones. This problem is only present on two specific components - both of which are interactive cards that can be flipped to reveal the ...

reactjstypescriptnext.jstailwind-cssframer-motion

Replace Nebular theme with a new design for a single component

I am currently using Nebular in my Angular application and I am trying to figure out how to customize the theme settings for a specific component on just one page, without affecting other instances of the same component that are using the default settings. ...

angularsasssidebarnebular

When utilizing the file-loader in Webpack with a function in the outputPath parameter, an EISDIR error occurs,

I am attempting to create a specific output format for my locale files in the form of _locales/[locale_shortcut]/[file].json To achieve this, I am utilizing the file-loader plugin within webpack. While the documentation mentions the use of a function with ...

typescriptwebpackwebpack-file-loader

Experiment with Google Sign-In authentication in jest with Firebase

As I try to effectively mock firebase authentication with Google login, I am encountering some difficulties. Below is the code that I am currently working with: simple.tsx import React, { Component } from 'react'; import * as firebase from &apo ...

reactjstypescriptjestjsenzyme

Angular 7 is throwing an error because it is expecting the "path" argument to be a string, but it is receiving an object instead

Whenever I attempt to run tests on my Angular project by typing: ng test --browsers=PhantomJS I discovered that I needed to manually install phantomjs using the following command: npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

node.jsangularnpmphantomjs

The Angular 13 interceptor is not capturing a 403 error as expected

When it comes to running a .NET 6 API, the Angular 13 application is encountering an issue with intercepting a 403 error. Strangely enough, the 401 error is being handled properly. The problem lies in the fact that the 403 error does not trigger the (err: ...

angular.net-6.0

Prevent selection on a specific column in ngx-datatable

My ngx-datatable has 4 data columns and a delete button column to remove rows from the table. https://i.stack.imgur.com/MbGDM.png Here is the HTML code: <ngx-datatable *ngIf="!isLoading" #table class="data-table" [scrollbarH]="true" [rows]="data" [co ...

angulartypescript2.0ngx-datatable

Angular 2: Implementing service functions on button click using the (click) event

Is it possible to call a function from my service when clicking on an element in the HTML returned from an HTTP call? Here is the HTML snippet: <a (click)="SellingVarietiesService.goToVarietyDetails(3)">Test</a> The function I want to call i ...

angular

The typings for object properties in Typescript

I recently encountered a function call in my code: var myVar = myFunction({ property: 'prop', functionProperty() { console.log(this.property); }, functionProperty2() { this.functionProperty(); } }); I' ...

typescripttypescript-typings

Is there a way to verify a user's login status?

Currently, I am working on an angular 13 project and incorporating @angular/fire 7 into my development process. I have developed a service with various functions for injection. Below is the code snippet: import { Injectable } from '@angular/core&apos ...

angulartypescriptangularfire

The most recent Angular application created with Angular-CLI is experiencing issues when compiling the package.json file

I encountered an issue while attempting to create a new Angular application using angular-cli. The problem arises during the npm package installation process. When I try to initiate the creation of a new Angular application with angular-cli and proceed to ...

angularnpmangular-clibabeljs

What does the concept of "signaling intent" truly signify in relation to TypeScript's read-only properties?

Currently diving into the chapter on objects in the TypeScript Handbook. The handbook highlights the significance of managing expectations when using the readonly properties. Here's a key excerpt: It’s crucial to clarify what readonly truly signif ...

typescript