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: https://i.sstatic.net/UKTAP.png

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

What is the importance of specifying a language version when parsing a TypeScript source file?

Currently, we are utilizing the public API to analyze TypeScript files in this manner: ts.createSourceFile( file.name, file.textContent, languageVersion, /*setParentNodes*/ true); Something that has caught our attention is the significanc ...

typescript

A pronounced distinction exists between ionInput and ionChange functionality

Q. Can you explain the difference between (ionInput) and (ionChange) events in Ionic framework? When would it be more appropriate to use one over the other? I have experimented with both event handlers below and found that they produce the same expected r ...

angulartypescriptionic-frameworkionic2ionic3

Passing parameters to an Angular CLI ejected app

Currently, I am utilizing @angular/[email protected]. I have leveraged the new eject feature to modify the webpack configuration. Now, I find myself perplexed on how to pass parameters to my build process. For instance, how can I execute ng build --p ...

angularnpmwebpackangular-cli

Issue encountered in Angular 2 Heroes Tour, Step 7

I checked multiple forums, but didn't come across any relevant information. After starting the tutorial just 3 days ago and reaching Step 7, I encountered an error when incorporating the InMemoryWebApiModule as instructed in the steps. The error can ...

angularjsangular

Guide to create a React component with passed-in properties

Currently in the process of transitioning a react project from redux to mobx, encountering an issue along the way. Previously, I utilized the container/presenter pattern with redux and the "connect" function: export default connect(mapStateToProps, mapDi ...

reactjstypescriptmobxmobx-react

The ng-bootstrap typeahead is encountering an error: TypeError - Object(...) is not functioning correctly

Hey there! I'm trying to integrate the Angular Bootstrap typeahead component in my Angular 5 application by following the linkToTypeahead. However, I'm encountering some errors along the way. Here's what I'm seeing: ERROR TypeError: Ob ...

angulartypescripttypeaheadng-bootstraptypeerror

Trouble with updating a variable within a loop in Cypress

During my experience with writing Cypress tests, I came across an issue that is preventing me from updating a specific variable. The goal of my test is to run a loop and update the questionId variable within each iteration for making API queries. However, ...

javascripttypescriptiterationcypress

Apply a border to the div that has been selected

I have a tool for storing information and I am using *ngFor to display each instance in a line. Is there a way to add a border when clicking on a line? The border should only appear on the clicked line, disappearing from the previous one if another line i ...

htmlcssangulartypescriptbootstrap-4

Having difficulty passing a function as a parameter from a NextJS component

I have a code snippet like this in a NextJS component: const [currentGPS, setCurrentGPS] = useState({coords:{latitude:0.0,longitude:0.0}}) useEffect(() => { utl.getGPSLocation( (v:{coords: {latitude:number; longitude:n ...

javascripttypescriptnext.js

Concealing Bootstrap Dialog in Angular 6 through Component隐藏Angular 6中

I have been struggling to hide a bootstrap dialog from a component with no success. Here is my Dialog code: <div class="modal fade" id="loading_video_upload" tabindex="-1" role="dialog" aria-labelledby="loading_video_upload_label" aria-hidde ...

javascriptangularbootstrap-4

Guide on moving elements to a different list with the help of the Angular DragDrop CDK Service

I encountered a unique situation while working on my project where I needed to implement a drag and drop feature for multiple lists using Angular CDK's DragDrop service. While I was able to successfully move items within a single list, transferring an ...

javascriptangularangular-materialangular-cdk

Obtain redirected JSON data locally using Angular 5

Currently, I am working on retrieving JSON data which will be sent to my localhost through a POST method. The SpringBoot API controller will validate the JSON content before forwarding it to my localhost. My task is to intercept this JSON data when it is t ...

javascriptangulartypescript

Converting SQL COUNT query to angularfire2: A guide on translating Firebase / angularfire2

In my firebase database, I have the following structure: "users" : { "USER1_ID" : { "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41343224337001393939396f222e2c">[email protected]</a>", ...

angularfirebasefirebase-realtime-databaseangularfire2

Guide to simulate the store.pipe method in an Angular component during unit testing

Just starting out with Angular and I'm trying to write unit tests for a component that retrieves data from the store. I've mocked both the service files and the store itself, but when running the test, I keep encountering the following error. Eve ...

angularunit-testingkarma-jasminengrx-store

Utilizing WebPack 5 in conjunction with Web workers in a React/Typescript environment

Can someone help me figure out how to make a web worker function properly with create-react-app, Typescript, and Webpack 5? I've been struggling with limited documentation and can't seem to find a clear explanation. I'm trying to avoid using ...

reactjstypescriptwebpackcreate-react-appweb-worker

Issue: The variable 'HelloWorld' has been declared but not utilized

Why am I encountering an error when using TypeScript, Composition API, and Pug templating together in Vue 3? How do I resolve this issue when importing a component with the Composition API and using it in a Pug template? ...

javascripttypescriptvue.jsvuejs3vue-composition-api

Having difficulty grasping the concept of a component in Angular that utilizes a service which incorporates the HttpModule

I just started learning Angular and I'm grappling with a testing issue. After studying how the framework functions, I noticed that a component using a service which incorporates HttpModule requires the HttpModule to be imported in the component test ...

angularjasmineangular-servicesangular-components

Enhancing Angular HighChartsIs it time to rev

There seems to be an issue with the highchart not redrawing itself when dynamically changing plot options. I have integrated Highcharts into my code as shown below: In the HTML: <highcharts-chart [Highcharts]="Highcharts" [options]="opt ...

angularhighcharts

Define a new type in Typescript that is equal to another type, but with the added flexibility of having optional

I have 2 categories: category Main = { x: boolean; y: number; z: string } category MainOptions = { x?: boolean; y?: number; z?: string; } In this scenario, MainOptions is designed to include some, none, or all of the attributes that belong to ...

javascripttypescripttypes

Embed a React component within an Angular 6 application

I am attempting to integrate a React component into an Angular 6 project. The React component I am using is from the tic-tac-toe tutorial which can be found at this link. Prior to adding the React component, my Angular host component was functioning corre ...

angularreactjs