I am trying to import highcharts-annotations in angular 6 typescript module file app.module.ts. I tried the below code but it is showing an error
"Could not find declaration file for module 'highcharts/module/annotations' "
But the annotations.js file resides in the same path and it is showing error in console
"ERROR TypeError: chart.addAnnotation is not a function".
Has someone tried this before?
Code:
import { ChartModule } from 'angular2-highcharts';
import { AnnotationsModule } from 'highcharts/modules/annotations';
import * as Highcharts from 'highcharts';
Try to import the module in that way:
import * as AnnotationsModule from "highcharts/modules/annotations"
And initialize it:
AnnotationsModule(Highcharts);
Or use require:
require('highcharts/modules/exporting')(Highcharts);
Check the demo with highcharts-angular official wrapper which I recommend you.
Demo:
https://codesandbox.io/s/329llv6wj1
Related
I am trying to import 'GridActionsCellItem' from '#mui/x-data-grid' as:
import { GridActionsCellItem } from '#mui/x-data-grid';
But it shows error as:
Attempted import error: 'GridActionsCellItem' is not exported from '#mui/x-data-grid'.
I am copying the official documentation code from here.
Can anyone help me with this?
I solved this problem by upgrading my '#mui/x-data-grid' from 4.4.to '5.0.0-beta.2'.
Just replace the version of your #mui/x-data-grid package in your package.json with ^5.0.0-beta.2 and it should work.
I have an Angular 4.1.1 app that is successfully pulling in leaflet.js to provide maps and map layers etc. I am trying to add a leaflet plugin called browserPrint
I import Leaflet into a Component like this:
import * as L from "leaflet";
import * as browserPrint from "../../../../assets/scripts/leaflet.browser.print.min";
The import statement for Leaflet works great and I can create and display a map.
The error occurs when I try and add the second line for browserPrint.
The angular-cli build throws an error:
ERROR in
/src/app/services/driverLists/driver-lists-map/driverLists.map.component.ts
(8,31): File '/src/assets/scripts/leaflet.browser.print.min.js' is not
a module.
What I have tried:
I added declare var browserPrint: any; to the typings.d.ts
I tried switching the import to:
import "../../../../assets/scripts/leaflet.browser.print.min";
but that just threw tons of errors and broke the maps all together
I tried switching the import to:
import * as BrowserPrint from "../../../../assets/scripts/leaflet.browser.print";
but the error changes to Cannot find module leaflet.browser.print
I have also tried changing the file paths to use the files from the leaflet.browser.print node modules folder. But the same errors are generated.
QUESTION
Can someone help me figure out how to add the leaflet browser print plugin to a leaflet map inside an Angular4+ app?
Thanks in advance.
I saw in the documentation for ngx-leaflet that we should create a ./src/typings.d.ts file and add the below code.
import * as L from 'leaflet';
declare module 'leaflet' {
namespace control {
function browserPrint(options?: any): Control.BrowserPrint;
}
namespace Control {
interface BrowserPrint {
addTo(map: L.Map): any;
}
}
}
It worked for me this way.
I think you want to include the file in the "scripts" array in your angular-cli.json. That should wrap it up in your webpack output, and you won't need to actually import it (as you've said above, that particular file doesn't export anything, so you can't import it anyway).
Documentation here:
https://github.com/angular/angular-cli/wiki/stories-global-scripts
I'm taking over development from a previous developer who added Zurb Foundation as a framework to our website. Foundation has been installed with npm. I'm getting errors in the console for all of the foundation javascript files as follows:
Uncaught SyntaxError: Unexpected token import
Checking the code, foundation.core.js has the lines:
"use strict";
import $ from 'jquery';
import { GetYoDigits } from './foundation.util.core';
import { MediaQuery } from './foundation.util.mediaQuery';
I'm including jQuery right before any other JS is included in my HTML doc. Not sure what the deal is here. Can anyone offer help?
Thanks.
The syntax for an as would be the following:
import * as $ from 'jquery';
import { GetYoDigits } from './foundation.util.core';
import { MediaQuery } from './foundation.util.mediaQuery';
This is saying to take all exports from the node module jquery and make them live under the keyword $. You should then be able to use $ as expected.
You need to change the way you import it
"use strict";
import {$} from 'jquery';
im working on a project and i have a problem. Im using Angular2, typescript, webpack 2.2 and im trying to use this table component:
pyrite table
The problem starts when i try to import this component in my component. I installed it with npm and thats work. But when i try to import it i use: import * as Table from "pyrite-table";
And then i try to use Table.load but i get an error: index.js:38 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
And that line is this:
export default module.exports = window.pyrite.Table = Table;
So my question is, how can i import this component in my project that is using typescript.
I saw in the project repo's readme the following loc:
import Table from 'pyrite-table';
Have you tried this one? Or:
import { Table } from 'pyrite-table';
I'm trying to create a simple test in Meteor with Typescript, using meteortypescript:compiler and practicalmeteor:mocha. When my file is named Foo_test.js the code below works fine. When I name it Foo_test.ts, I get errors:
import {Meteor} from 'meteor/meteor';
import {Random} from 'meteor/random';
// With typescript, the line below gives:
// Cannot find module 'meteor/practicalmeteor:chai'
// Without typescript, there are no errors
import { assert } from 'meteor/practicalmeteor:chai';
Why am I seeing the error when using Typescript, and what can I do to fix it?