Trying to import highmaps and jspm, 2 days and no luck.
import * as Ng2Highcharts from 'highcharts/modules/map';
Ng2Highcharts(Highcharts);
but getting an error that Ng2Highcharts is an object, which it is, but I dont know to which method inside Ng2Highcharts do I need to pass Highcharts to???
you can checkout my config.js here:
https://github.com/born2net/studioDashboard/blob/hot-reload/jspm.config.js
and my entire class here:
https://github.com/born2net/studioDashboard/blob/hot-reload/src/comps/app1/dashboard/StationsMap.ts
here is debug snap:
any help is GREATLY appreciated,
Sean
Related
I am trying to use Dumbbell chart of highcharts in react app.
As per the link below, I have imported dumbbell module.
https://www.npmjs.com/package/highcharts-react-official#how-to-add-a-module
import highchartsDumbbell from 'highcharts/modules/dumbbell';
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official';
highchartsDumbbell(Highcharts);
And wrapping the options and data in HichartsReact component as below:
<HighchartsReact highcharts={Highcharts} options={options} />
Getting below error:
Uncaught TypeError: Cannot read property 'prototype' of undefined
at dumbbell.js:16
at h (dumbbell.js:8)
at dumbbell.js:15
Could you please suggest if anything is missing here.
Notice that the dumbbell series requires also the highcharts-more package.
API: https://api.highcharts.com/highcharts/series.dumbbell
Demo: https://stackblitz.com/edit/react-xhxdyv?file=index.js
using exporting(highchart) getting below error:
ERROR in src/app/desktop/module/dashboard/dashboard.module.ts(24,1): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("C:/website/UI_Dashboard/node_modules/highchart
s/modules/exporting.src")' has no compatible call signatures.
in the module:
import {ChartModule, HIGHCHARTS_MODULES} from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as highcharts from 'highcharts';
import * as exporting from 'highcharts/modules/exporting.src';
import * as offline from 'highcharts/modules/offline-exporting';
exporting(highcharts);
offline(highcharts);
what should I do for solving this issue?
Have you tried with import exporting from 'highcharts/modules/exporting.src';?
It's the suggested way of module working as documented in the official Highcharts wrapper for Angular - https://github.com/highcharts/highcharts-angular#core
You should also load all Highcharts related files as src or minified - mixing might cause some TS issues.
An import path for src version of Highcharts core is 'highcharts/highcharts.src'.
Also (I'm not sure if this applies here since the code might not be complete), highcharts-more needs to be initialized as any other module. Usually it is loaded before other modules - initialization order is rarely important (some series types are based on optional modules) and you will get an error if the order is wrong, so it's important to test this.
In case anyone encounters this problem nowadays, changing this:
import * as exporting from 'highcharts/modules/exporting.src';
To this:
import Exporting from 'highcharts/modules/exporting';
Solved the problem for me.
I'm using Angular CLI 11.1.4 and the Highcharts npm package v9.2.2
I have been searching the internet about how to add highchart patternfill in angular highcharts, but no results have been found for angular. Is there any plugin available for angular or anybody have used this in angular application? Thank you.
You need to import and initialize the pattern-fill module:
import * as Highcharts from "highcharts";
import * as patternFill from "highcharts/modules/pattern-fill";
patternFill(Highcharts);
Live demo: https://codesandbox.io/s/18xojqn50j
Docs: https://github.com/highcharts/highcharts-angular/blob/master/README.md#to-load-a-module
I am putting an angular portion into my MVC app. As such, I have added a tag to my layout view to find the Angular source code, and this is working great.
My issue arises in trying to add a 3rd party module to my project. I added it through the package.json with no problem, and added the module to my app.module.ts as follows:
import { FileUploadModule } from 'primeng/fileupload';
The reference is found, Visual Studio is happy, everything is fine. However, when I run the project locally, I get the following 404 error:
GET http://localhost:59911/src/primeng/fileupload 404 (Not Found)
It seems to me likely that the tag is causing the issue, but I can't remove it without killing the rest of the Angular functionality. Any hints? Can I add an override to the imports call?
Thanks, Mike
On PrimeNG's official website they suggested using import { FileUploadModule } from 'primeng/fileupload'; but it doesn't work any more. I guess they didn't update the docs.
You need { FileUploadModule } from 'primeng/primeng';
The structure is
In the primeng.d.ts file PrimeNG re-exported all modules.
export * from './components/fileupload/fileupload';
For now, no matter which PrimeNG module is used, it is all from primeng/primeng. Here's the imported modules in my project:
import {
ButtonModule,
CodeHighlighterModule,
ConfirmDialogModule,
FieldsetModule,
FileUploadModule,
GrowlModule,
MessagesModule
} from 'primeng/primeng';
The version I use is "primeng": "^4.2.1"
The issue was that primeng was not in the mapping, so it was looking for it in src.
I added the following to systemjs.config.js:
in maps:
'primeng': 'npm:primeng',
in packages:
primeng: {
defaultExtension: 'js'
}
Thanks for the help everyone!
so this snippet works great when I use commonjs on my config.js
import * as Ng2Highcharts from 'highcharts/modules/map';
Ng2Highcharts(Highcharts);
but as soon as I switch to system with the following import:
import * as Ng2Highcharts from 'highcharts/modules/map';
Ng2Highcharts.default(Highcharts)
I get an error of :
ORIGINAL EXCEPTION: TypeError: x[(intermediate value)(intermediate value)(intermediate value)] is not a constructor
ORIGINAL STACKTRACE:
not sure why config.js switching from cjs to system breaks this,
Thanks
Sean