zefoy / ngx-color-picker

Color picker widget for the Angular (version 2 and newer)
MIT License
449 stars 141 forks source link

On IE 11 moduleid ("../../../core/esm5/core.js") is missing. #258

Open Diebolik opened 3 years ago

Diebolik commented 3 years ago

"ngx-color-picker": "10.0.1"

HTML

<input type="text" [(colorPicker)]="color" [(ngModel)]="color" [style.background]="color" [value]="color" [cpAlphaChannel]="'disabled'" [cpPosition]="cpPosition"
               (colorPickerChange)="onColorPickerChanged($event)" class="form-control" [formControl]="control" [ngClass]="{'valid': control.valid, 'error': !control.valid && (!control.pristine || submitted) }" />

If i import to the project module the import { ColorPickerModule } from 'ngx-color-picker'; i'm getting the following runtime error in IE 11:

kép

Other browser (Chrome, FireFox, Edge) works fine.

package.json:

  "dependencies": {
    "@angular-devkit/core": "^0.0.29",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ngx-translate/core": "^9.1.1",
    "angular-split": "3.0.2",
    "angular2-toaster": "^8.0.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "font-awesome": "4.7.0",
    "intl": "^1.2.5",
    "mydatepicker": "^2.6.3",
    "mydaterangepicker": "^4.2.1",
    "ng-drag-drop": "^4.0.0",
    "ng-lazyload-image": "4.0.0",
    "ng-pick-datetime": "^5.2.6",
    "ng2-nouislider": "1.7.7",
    "ngx-color-picker": "10.0.1",
    "nodelist-foreach-polyfill": "^1.2.0",
    "nouislider": "^11.0.3",
    "rxjs": "^5.5.2",
    "serializr": "^1.1.14",
    "signalr": "^2.2.2",
    "typedjson-npm": "^0.1.7",
    "zone.js": "^0.8.14",
    "angular-sortablejs": "2.7.0",
    "sortablejs": "1.9.0"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "less": "~3.12.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }

polyfills.ts


/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es7/array';
import 'core-js/es7/string';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

// ES6 Modules import / Typescript import
/** IE 11 required the following import to NodeList.forEach */
import 'nodelist-foreach-polyfill';

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

/***************************************************************************************************
 * Intl
 */
import 'intl';
import 'intl/locale-data/jsonp/en';

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "./src/",
    "paths": { ...  },
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Could you help me plz? I tried that, i update the ngx-color-picker to the latest version 11.0.0, but i got the same error in IE 11.

Thank you, András

sconix commented 3 years ago

There starts to be quite few web libraries that still support IE11 with their latest versions and hence I am not too keen on supporting IE11 neither, just don't see the point to support something thats being killed very soon. That being said I can accept IE11 fixes as PR's, but wont be looking into those.

IamSurendraThota commented 3 years ago

"ngx-color-picker": "10.0.1"

HTML

<input type="text" [(colorPicker)]="color" [(ngModel)]="color" [style.background]="color" [value]="color" [cpAlphaChannel]="'disabled'" [cpPosition]="cpPosition"
               (colorPickerChange)="onColorPickerChanged($event)" class="form-control" [formControl]="control" [ngClass]="{'valid': control.valid, 'error': !control.valid && (!control.pristine || submitted) }" />

If i import to the project module the import { ColorPickerModule } from 'ngx-color-picker'; i'm getting the following runtime error in IE 11:

kép

Other browser (Chrome, FireFox, Edge) works fine.

package.json:

  "dependencies": {
    "@angular-devkit/core": "^0.0.29",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ngx-translate/core": "^9.1.1",
    "angular-split": "3.0.2",
    "angular2-toaster": "^8.0.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "font-awesome": "4.7.0",
    "intl": "^1.2.5",
    "mydatepicker": "^2.6.3",
    "mydaterangepicker": "^4.2.1",
    "ng-drag-drop": "^4.0.0",
    "ng-lazyload-image": "4.0.0",
    "ng-pick-datetime": "^5.2.6",
    "ng2-nouislider": "1.7.7",
    "ngx-color-picker": "10.0.1",
    "nodelist-foreach-polyfill": "^1.2.0",
    "nouislider": "^11.0.3",
    "rxjs": "^5.5.2",
    "serializr": "^1.1.14",
    "signalr": "^2.2.2",
    "typedjson-npm": "^0.1.7",
    "zone.js": "^0.8.14",
    "angular-sortablejs": "2.7.0",
    "sortablejs": "1.9.0"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "less": "~3.12.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }

polyfills.ts


/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es7/array';
import 'core-js/es7/string';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

// ES6 Modules import / Typescript import
/** IE 11 required the following import to NodeList.forEach */
import 'nodelist-foreach-polyfill';

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

/***************************************************************************************************
 * Intl
 */
import 'intl';
import 'intl/locale-data/jsonp/en';

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "./src/",
    "paths": { ...  },
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Could you help me plz? I tried that, i update the ngx-color-picker to the latest version 11.0.0, but i got the same error in IE 11.

Thank you, András

Hi Did you find any solution for this ?

Diebolik commented 3 years ago

"ngx-color-picker": "10.0.1" HTML

<input type="text" [(colorPicker)]="color" [(ngModel)]="color" [style.background]="color" [value]="color" [cpAlphaChannel]="'disabled'" [cpPosition]="cpPosition"
               (colorPickerChange)="onColorPickerChanged($event)" class="form-control" [formControl]="control" [ngClass]="{'valid': control.valid, 'error': !control.valid && (!control.pristine || submitted) }" />

If i import to the project module the import { ColorPickerModule } from 'ngx-color-picker'; i'm getting the following runtime error in IE 11: kép Other browser (Chrome, FireFox, Edge) works fine. package.json:

  "dependencies": {
    "@angular-devkit/core": "^0.0.29",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ngx-translate/core": "^9.1.1",
    "angular-split": "3.0.2",
    "angular2-toaster": "^8.0.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "font-awesome": "4.7.0",
    "intl": "^1.2.5",
    "mydatepicker": "^2.6.3",
    "mydaterangepicker": "^4.2.1",
    "ng-drag-drop": "^4.0.0",
    "ng-lazyload-image": "4.0.0",
    "ng-pick-datetime": "^5.2.6",
    "ng2-nouislider": "1.7.7",
    "ngx-color-picker": "10.0.1",
    "nodelist-foreach-polyfill": "^1.2.0",
    "nouislider": "^11.0.3",
    "rxjs": "^5.5.2",
    "serializr": "^1.1.14",
    "signalr": "^2.2.2",
    "typedjson-npm": "^0.1.7",
    "zone.js": "^0.8.14",
    "angular-sortablejs": "2.7.0",
    "sortablejs": "1.9.0"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "less": "~3.12.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }

polyfills.ts


/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es7/array';
import 'core-js/es7/string';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

// ES6 Modules import / Typescript import
/** IE 11 required the following import to NodeList.forEach */
import 'nodelist-foreach-polyfill';

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

/***************************************************************************************************
 * Intl
 */
import 'intl';
import 'intl/locale-data/jsonp/en';

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "./src/",
    "paths": { ...  },
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Could you help me plz? I tried that, i update the ngx-color-picker to the latest version 11.0.0, but i got the same error in IE 11. Thank you, András

Hi Did you find any solution for this ?

Hi. I did not find any solution for this with this package. Sorry.