cstefanache / angular2-img-cropper

Angular 2 Image Cropper
MIT License
364 stars 135 forks source link

Error on translate for ng2-img-cropper....? #81

Closed ghatul closed 7 years ago

ghatul commented 7 years ago

i follow all your step which is given on your wiki page but i dont understand what is missing....... on --npm 3.10.X --node 6.x.x --on angular stable 2.x.x If seed build in production mode: show following error:

dist/prod/client/js/app.js [19:31:36] 'build.bundles.app' errored after 1.74 s [19:31:36] Error on translate for ng2-img-cropper/src/imageCropperModule.ts at file:///home//Desktop/development2.0/fullstack-seed/node_modules/ng2-img-cropper/src/imageCropperModule.ts Loading ng2-img-cropper/index.ts Loading dist/tmp_client/app/app.module.js Loading dist/tmp_client/app/main.js MultipleErrors: file:///home/pooja/Desktop/development2.0/tpl-web-fullstack-seed/node_modules/ng2-img-cropper/src/imageCropperModule.ts:6:1: Unexpected token @ file:///home/pooja/Desktop/development2.0/tpl-web-fullstack-seed/node_modules/ng2-img-cropper/src/imageCropperModule.ts:6:2: Semi-colon expected

cstefanache commented 7 years ago

do you have configured system.js to load library as TS instead of JS? 'ng2-img-cropper': { main: 'index.ts', defaultExtension: 'ts' },

ghatul commented 7 years ago

my seed config is: ........................... '@angular/router/testing': 'nodemodules/@angular/router/bundles/router-testing.umd.js', 'ng2-img-cropper': 'npm:ng2-img-cropper@0.7.0', 'app/': '/app/', // For test config 'dist/dev/': '/base/dist/dev/', '': 'nodemodules/

'},

  'rxjs': {
    main: 'Rx.js',
    defaultExtension: 'js'
  },
  'ng2-img-cropper': {
    main: 'index.ts',
    defaultExtension: 'ts'
  },
}
cstefanache commented 7 years ago

Are you using AngularJS 2.0.1?

ghatul commented 7 years ago

I have ^2.0.0 but when i delete the node_modules and again install it then it taking higher 2.1.0 ,i saw in modules package.json file it show version 2.1.0

ghatul commented 7 years ago

when first i was hit npm i ng2-img-cropper then it show

npm warnings UNMEETPEER DEPENDENCIE....

cstefanache commented 7 years ago

Strange... peer dependencies are (can you please check your npm packages?) "@angular/common": "^2.1.0", "@angular/compiler": "^2.1.0", "@angular/core": "^2.1.0"

ghatul commented 7 years ago

My dependencies are:
"@angular/common": "^2.0.0", "@angular/compiler": "^2.0.0", "@angular/core": "^2.0.0", "@angular/forms": "^2.0.0", "@angular/http": "^2.0.0", "@angular/platform-browser": "^2.0.0", "@angular/platform-browser-dynamic": "^2.0.0", on npm install npm modules installed at 2.1.0 '^' tag take latest version of angular

ghatul commented 7 years ago

I use this seed https://github.com/vyakymenko/angular2-seed-express . It is not upddated to v2.1.0 but your module on v2.1.0 . may this stuck? Error on translate for ng2-img-cropper because of bundling the JavaScript files using the SystemJS builder. and that unmeetpeerDependency warning is:

mobile-seed@2.0.1 /home/Desktop/development2.0/tpl-web-fullstack-seed +-- UNMET PEER DEPENDENCY @angular/compiler@2.1.0 +-- UNMET PEER DEPENDENCY @angular/core@2.1.0 +-- UNMET PEER DEPENDENCY @angular/platform-server@2.1.0 `-- ng2-img-cropper@0.7.0

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:

cstefanache commented 7 years ago

I will have a look today.

cstefanache commented 7 years ago

The problem is that we are publishing typescript files for the ng2-img-cropper package. I guess that the actual error on the console was: 404 ng2-img-cropper/index.ts.js because there was no transpiler defined in the systemjs folder.

here is the correct configuration:

SYSTEM_CONFIG_DEV: any = { defaultJSExtensions: true, transpiler: 'typescript', //typescript compiler options typescriptOptions: { emitDecoratorMetadata: true }, packageConfigPaths: [ /nodemodules//package.json, /node_modules/__/package.json, /nodemodules/@angular//package.json` ], paths: {

  '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
  '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
  '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
  '@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
  '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
  '@angular/common/testing': 'node_modules/@angular/common/bundles/common-testing.umd.js',
  '@angular/compiler/testing': 'node_modules/@angular/compiler/bundles/compiler-testing.umd.js',
  '@angular/core/testing': 'node_modules/@angular/core/bundles/core-testing.umd.js',
  '@angular/http/testing': 'node_modules/@angular/http/bundles/http-testing.umd.js',
  '@angular/platform-browser/testing':
    'node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
  '@angular/platform-browser-dynamic/testing':
    'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
  '@angular/router/testing': 'node_modules/@angular/router/bundles/router-testing.umd.js',
  'ng2-img-cropper': 'node_modules/ng2-img-cropper/',

  'app/*': '/app/*',
  // For test config
  'dist/dev/*': '/base/dist/dev/*',
  '*': 'node_modules/*'
},
packages: {
  'ng2-img-cropper': {
    main: 'index.ts',
    defaultExtension: 'ts'
  }
}

};

` we are going to publish the js versions in the next release

cstefanache commented 7 years ago

note that I have added: transpiler: 'typescript', //typescript compiler options typescriptOptions: { emitDecoratorMetadata: true },

and

'ng2-img-cropper': 'node_modules/ng2-img-cropper/',

and

packages: { 'ng2-img-cropper': { main: 'index.ts', defaultExtension: 'ts' } }

ghatul commented 7 years ago

@cstefanache thanku

roshandhabekar commented 7 years ago

@cstefanache hey, can you please explain where u added above code, m getting confuse and facing same error with ionic 2