I am using "angular2-highcharts": "0.4.1" library for using highcharts in angular2 framework.
It was working correctly. If I try to delete node_modules and install using npm install afresh it gives below error to imports
[INFO] Module '"C:/Projects/SpectrumAnalyzer/test/Viavi Monitoring View/MonitorView/MonitorView/node_modules/#types/highcha
rts/modules/exporting"' resolves to a non-module entity and cannot be imported using this construct.
[INFO] Module '"C:/Projects/SpectrumAnalyzer/test/Viavi Monitoring View/MonitorView/MonitorView/node_modules/#types/highcha
rts/modules/offline-exporting"' resolves to a non-module entity and cannot be imported using this construct.
It fails at the import statement below
import * as HichartsExporting from 'highcharts/modules/exporting';
import * as HichartsOfflineExporting from 'highcharts/modules/offline-exporting';
HichartsExporting(Highcharts);
HichartsOfflineExporting(Highcharts);
I checked node_modules changes they have done below changes :
node_modules/#types/highcharts/modules/exporting.d.ts
Before :
declare var HighchartsExporting: (H: Static) => Static;
After :
declare function HighchartsExporting(H: Static): Static;
and same in
node_modules/#types/highcharts/modules/offline-exporting.d.ts
Before :
declare var HighchartsOfflineExporting: (H: Static) => Static;
After :
declare function HighchartsOfflineExporting(H: Static): Static;
Kindly suggest.
Thanks,
Sardar Nale
I hope it isn't too late. I just asked a similar question.
If require works fine for you, you could try
import HichartsExporting = require('highcharts/modules/exporting');
import HichartsOfflineExporting = require('highcharts/modules/offline-exporting');
HichartsExporting(Highcharts);
HichartsOfflineExporting(Highcharts);
In my specific case, the only way I could do it, after hours researching, was by giving up on the imports and including the script tags in the HTML:
<script src="~/node_modules/highcharts/modules/exporting.js">
<script src="~/node_modules/highcharts/modules/offline-exporting.js">
In this case, you don't even have to do
HichartsExporting(Highcharts);
HichartsOfflineExporting(Highcharts);
afterwards.
Related
I'm trying to import a JSON file on my Vite app, whose paths are dynamically generated. So the import path for this JSON includes variables.
I know it's possible to do it with require, but I'm working with Svelte, and I cant use requires.
You can use a dynamic import() statement for that. This will return a promise, which has to be awaited, though. E.g.
<script lang="ts">
import meta from './meta.json';
const filePromise = import(/* #vite-ignore */ `./${meta.file}.json`);
</script>
{#await filePromise then file}
{file.property}
{/await}
There are some limitations to dynamic imports in Vite so the application can be built properly. The #vite-ignore comment silences a warning output about these limitations.
I'm trying to make a luxon example in stackblitz, but the imports are not working.
The luxon library and its types are added, and it is imported at the beginning of the file:
However I get the message that it is undefined!
I tried to find other examples of stackblitz (google: "luxon stackblitz") however none of them seem to work or use and old version, which is imported via CDN
Do I somehow have to add the whole luxon library to the project?
Code (super simple)
// Import stylesheets
import './style.css';
import { DateTime } from 'luxon';
// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `luxon sample -->"${DateTime.now()}"<--`;
On this fiddle https://jsfiddle.net/k2c5upfo/1/, extern modules are called using the import method. I don't use node on my project. I'd like to convert all these import files into regular javascript files. How can I built them without using node.js ?
import * as THREE from "https://cdn.jsdelivr.net/npm/three#0.118.2/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/controls/OrbitControls.js";
import { EffectComposer } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/EffectComposer.js';
import { ShaderPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/ShaderPass.js';
import { RenderPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/RenderPass.js';
import { ClearPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/ClearPass.js';
import { MaskPass, ClearMaskPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/MaskPass.js';
import { CopyShader } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/shaders/CopyShader.js';
For example, I was able to call 'OrbitControls.js' on a older version of three.js by simply add another file. Can I still use this method ? Thank you
EDIT :
I managed to convert my workflow using es6 modules. I've been wondering if there's a way to only import specific modules. My generated output file has the same weight with theses two different lines.
import {Scene, PerspectiveCamera, WebGLRenderer, CylinderBufferGeometry, MeshNormalMaterial, Mesh} from "../node_modules/three/build/three.module.js";
import * THREE from "../node_modules/three/build/three.module.js";
Is there a way to only have the part of code that I need in my final output ? Thank you.
Using global scripts is actually deprecate since r117. At the end of the year, using ES6 modules is the only way of importing example files.
I don't use node on my project.
Not sure I understand this sentence. The above fiddle is unrelated to node.js. You can import ES6 modules directly in HTML files as long as you put the import statements into script tags that look like so:
<script type="module">
</script>
This approach is also used by the official examples.
I'm playing a little bit with the new ES6 functionalities and Babel. I'm successfully using the modules export/import functionalities by means of require.js (transpiling into AMD), but the experimental module loader doesn't want to work. Here is my code and configurations:
extract of front-app/tst.js
import {tstimp as functocall} from "front-app/tstimp.js";
...
/**
* LOADING MODULES DYNAMICALLY
*/
System.import('front-app/tst_dyn_mod')
.then(some_module => {
console('using the module!');
some_module.sayHello();
})
.catch(error => {
console.log('error!');
console.log(error);
});
My .babelrc looks like this:
{
"presets": ["es2015", "react"],
"plugins": ["transform-es2015-modules-amd"]
}
and the scripts I import are these ones, in that order:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
<script data-main="front-app/tst" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js"></script>
<script src="node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
</head>
<body></body>
</html>
Unfortunately what I get is the following error by using firefox:
error! tst.js:695:9
Error: a is undefined
Error loading http://localhost/es6r1/front-app/tst_dyn_mod
what's that a? Am I missing something? Keep in mind my code is transpiled into AMD, but System is supposed to stay there in the transpiled code (and it IS there). The polyfill should do the dirty job, right?
I successfully get the thing working on Babel 6 with a slighlty different config (babel-node cli & thus commonjs) thanks to this plugin: https://www.npmjs.com/package/babel-plugin-system-import (npm install babel-plugin-system-import-transformer). Here's a excerpt of my .babelrc:
…
"plugins": [
"system-import-transformer",
{
"modules": "common"
}
]
…
Setting amd instead of common like indicated in the documentation should do the trick for you.
Only limitation of this tiny plugin, you should get a plain string module name like System.import("plainString") and not a computed one (nor string concatenation with +, nor new ES6 template literal and neither variable name). It seemds linked to that line of code.
I will try to PR a fix on that limitation if I can.
Just an update on this, https://github.com/thgreasi/babel-plugin-system-import-transformer has support for non string parameters. Just make sure not to use the updated alias package.
I am trying out the new Angular 2 Forms. My import statements are as follows:
import {bootstrap, onChange, NgIf, Component, Directive, View, Ancestor} from 'angular2/angular2';
import {formDirectives, NgControl, Validators, NgForm} from 'angular2/forms';
import {RegExpWrapper, print, isPresent} from 'angular2/src/facade/lang';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
The 'angular2/angular2' resolves fine, but none of the other "from" locations resolve. The error is:
Cannot find module 'angular2/forms'.
All of these components are currently in my node_modules directory. If I put in the full path:
import {formDirectives, ControlDirective, Validators, TemplateDrivenFormDirective} from 'C:/Users/Deb/node_modules/angular2/forms';
then it works. However, I should not need to use the full path. Am I missing something when I set up the tsconfig or is there something else wrong?
Problem was that the example application did not match with the version of Angular 2 currently available for download.
If anyone is interested, I now have a working example of Angular2 forms with TypeScript and Visual Studio Code here:
https://github.com/DeborahK/AngularU2015-Angular2Forms
Hope this helps anyone else standing on the "bleeding edge".