问题
I am trying to use Dygraph library in an Angular 6 project. It works perfectly in Chrome / FF, however it does not work in IE11. I installed the library through npm, and installed the @types from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/dygraphs
I imported the library in my module using:
import { default as Dygraph } from 'dygraphs';
When I open the page on IE11, loading stops on:
this.xticks.push({pos, label, has_tick});
With error SCRIPT1003: Expected ':'.
. The block where it stops loading is:
DygraphLayout.prototype._evaluateLineTicks = function() {
var i, tick, label, pos, v, has_tick;
this.xticks = [];
for (i = 0; i < this.xTicks_.length; i++) {
tick = this.xTicks_[i];
label = tick.label;
has_tick = !('label_v' in tick);
v = has_tick ? tick.v : tick.label_v;
pos = this.dygraph_.toPercentXCoord(v);
if ((pos >= 0.0) && (pos < 1.0)) {
this.xticks.push({pos, label, has_tick}); <<--- This line stops
}
}
this.yticks = [];
for (i = 0; i < this.yAxes_.length; i++ ) {
var axis = this.yAxes_[i];
for (var j = 0; j < axis.ticks.length; j++) {
tick = axis.ticks[j];
label = tick.label;
has_tick = !('label_v' in tick);
v = has_tick ? tick.v : tick.label_v;
pos = this.dygraph_.toPercentYCoord(v, i);
if ((pos > 0.0) && (pos <= 1.0)) {
this.yticks.push({axis: i, pos, label, has_tick});
}
}
}
};
By looking at the original js file, we can observe that the keys have been removed during compilation. Functions in the original file:
DygraphLayout.prototype._evaluateLineTicks = function () {
var i, tick, label, pos, v, has_tick;
this.xticks = [];
for (i = 0; i < this.xTicks_.length; i++) {
tick = this.xTicks_[i];
label = tick.label;
has_tick = !('label_v' in tick);
v = has_tick ? tick.v : tick.label_v;
pos = this.dygraph_.toPercentXCoord(v);
if (pos >= 0.0 && pos < 1.0) {
this.xticks.push({ pos: pos, label: label, has_tick: has_tick });
}
}
this.yticks = [];
for (i = 0; i < this.yAxes_.length; i++) {
var axis = this.yAxes_[i];
for (var j = 0; j < axis.ticks.length; j++) {
tick = axis.ticks[j];
label = tick.label;
has_tick = !('label_v' in tick);
v = has_tick ? tick.v : tick.label_v;
pos = this.dygraph_.toPercentYCoord(v, i);
if (pos > 0.0 && pos <= 1.0) {
this.yticks.push({ axis: i, pos: pos, label: label, has_tick: has_tick });
}
}
}
};
I do not understand why a working library get converted into a non working file. My tsconfig.json file is untouched:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
Would someone have any clue ?
回答1:
Turns out that, as recommended by jfriend00, the configuration needed to be:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es5",
"es6",
"dom"
]
}
}
What does lib does is not that clear in the documentation, but it seems that it should list the formats from all source codes to be compiled.
As I have DOM, ES5 and ES6 code, I needed all of them. The template I used only contained only DOM/ES6 code, that is probably why the lib was set to DOM/ES2017 only.
来源:https://stackoverflow.com/questions/51523018/transpile-to-es5-corrupt-js-library-in-angular-6-project