Image Crop not Loading in Angular 4.0.1

[mlcunha]

I am trying to use ng2-img-cropper with angular 4.0.1 and systemjs.config

All imported module are working fine, but the ng2-img-crop module is not loading:

Unable to load transpiler to transpile http://localhost:8080/node_modules/ng2-img-cropper/index.js Error loading http://localhost:8080/node_modules/ng2-img-cropper/index.js as "ng2-img-cropper"

The error is showing the correct developing path for external modules but it is not loading correctly.

[lucasvanhalst]

Same issue here.

localhost/:64 (SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/traceur.js
    Error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/traceur.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:5555/node_modules/zone.js/dist/zone.js?1492592299383:1199:29) [<root>]
        at Zone.runTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1492592299383:165:47) [<root> => <root>]
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1492592299383:460:38) [<root>]
    Error loading http://localhost:5555/node_modules/traceur.js
    Unable to load transpiler to transpile http://localhost:5555/node_modules/ng2-img-cropper/index.js
    Error loading http://localhost:5555/node_modules/ng2-img-cropper/index.js as "ng2-img-cropper" from http://localhost:5555/app/frameworks/rcc/rcc.module.js

[cstefanache]

sorry for the delay: ng2-img-cropper is no longer shipped with ts files. it should not be transpiled

[jchewitt]

Yes but you're using es6 modules in your js files. So it still must be transpiled:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

The import statement is used to import functions, objects or primitives that have been exported from >an external module, another script, etc.

Note: This feature is not implemented in any browsers natively at this time. It is implemented in many >transpilers, such as the Traceur Compiler, Babel, Rollup or Webpack.

To get around this I've downgraded to version 0.7.7

[cstefanache]

Can you please show me a snippet of system.js so I can try to reproduce? (or a plnkr that reproduces the issue). Found this: paths: { 'npm:': 'node_modules/' }

map: { 'ng2-translate': 'npm:ng2-translate/bundles/ng2-translate.js' }

and in your sources files:

import { TranslateService } from 'ng2-translate'

in ng2-translate lib ^^^

[cstefanache]

Any news on this issue? Can I close it?

[mlcunha]

You ca close it. It is working in this new version

[cstefanache]

thanks

[janstrbik]

Hi, I have the same issue in Angular 4.2.2 and angular2-img-cropper 0.9.0 as @lucasvanhalst has

[parker-mike]

To bypass it one can use:

System.config({
...
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
...,
  // map tells the System loader where to look for things
  map: {
...
    'typescript': 'npm:typescript/lib/typescript.js',
...