[Help wanted] Updated working example ?

[usedtobeNemesh]

Hello. I have been playing with this official working example and can't seem to integrate the ng2-img-cropper in my project while following your example. If I use "'ng2-img-cropper': 'npm:ng2-img-cropper@0.9.0'" in system.config.js I am getting the error "http://localhost:55217/node_modules/ng2-img-cropper@0.9.0/index.js 404 (Not Found)". If I remove the version ar the end I get "Unable to dynamically transpile ES module. A loader plugin needs to be configured via SystemJS.config({ transpiler: 'transpiler-module' })." How can I bypass this? Do you have an updated working example? Thank you!

Similar to: #175

My other system js related config looks like this: 'ng2-img-cropper': { main: 'index.js', defaultExtension: 'js' } Also, I am using gulp for compiling, typescript 2.4.

[parker-mike]

You may want to look at #230 for a hint, I've mentioned your issue at the very end of aside notes.

[usedtobeNemesh]

Thank you Mike. I moved on with my project and since I was unable to make it work I decided not to use ng2-img-cropper. However, I will try to find some time (today, tomorrow) to see if I can make it work using your suggestions. Have a nice day.

[usedtobeNemesh]

Hello again, I have tried once more. I made the necessary changes in system.config.js. Now I am getting the error:

Unable to dynamically transpile ES module. A loader plugin needs to be configured via SystemJS.config({ transpiler: 'transpiler-module' }). Instantiating http://localhost:55217/node_modules/ng2-img-cropper/index.js

If I add the typescript-related configs in system.config.js, meaning this:

//use typescript for compilation transpiler: 'typescript', //typescript compiler options typescriptOptions: { emitDecoratorMetadata: true },

then I get the following error:

Unexpected token < Evaluating http://localhost:55217/typescript Loading typescript Unable to load transpiler to transpile http://localhost:55217/node_modules/ng2-img-cropper/index.js Instantiating http://localhost:55217/node_modules/ng2-img-cropper/index.js

Thank you.

[usedtobeNemesh]

In _Layout.cshtml I have these referenced:

<script src="~/node_modules/core-js/client/shim.min.js"></script>
<script src="~/node_modules/zone.js/dist/zone.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>    
<script src="~/systemjs.config.js"></script>

My tsconfig file looks like this:

{
    "compileOnSave": true,
    "compilerOptions": {
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "allowJs": true,
    "checkJs": true,
    "pretty": true,     //experimental at Aug 2017
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": false,
    "noUnusedLocals": true,
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": true,
    "target": "es2015",
    "types": [ "node" ],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
},
"types": [
    "node", "jasmine", "core-js" 
],
"exclude": [
    "node_modules",
    "typings/index",
    "typings/index.d.ts",
    "typings/globals"
] }

My gulp.js file looks like this:

var gulp = require('gulp');
var babel = require('gulp-babel');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var typescript = require('gulp-tsc');
var clean = require('gulp-clean');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var tsOptions = {
    module: "commonjs",
    experimentalDecorators: true,
    target: "es2015",
    moduleResolution: "node",
    allowUnreachableCode: false,
    allowUnusedLabels: false,
    checkJs: true,
    allowJs: true,
    pretty: true,
    noImplicitAny: false,
    noEmitOnError: false,
    noUnusedLocals: true,
    experimentalDecorators: true,
    emitDecoratorMetadata: true,
    removeComments: true,
    sourceMap: true,
    types: ["node"]
}
gulp.task('clean', function () {
    return gulp.src('app/**/*.js', { read: false })
      .pipe(clean());
});
gulp.task('build', ['clean'], function () {
    return gulp.src('app/**/*.ts', { base: 'app' })
        .pipe(plumber({
            errorHandler: function () {
                console.log(arguments)
            }
        }))
        .pipe(sourcemaps.init())
        .pipe(typescript(tsOptions))
        .pipe(gulp.dest('app'))
        .pipe(plumber.stop())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('app'));
});
gulp.task('es6', ['build'], function () {
    return gulp.src('app/**/*.js')
        .pipe(babel({ presets: ['es2015'] }))
          .pipe(uglify())
          .pipe(gulp.dest('app'));
});
gulp.task('build-dev', ['clean'], function () {
    return gulp.src('app/**/*.ts', { base: 'app' })
        .pipe(plumber({
            errorHandler: function () {
                console.log(arguments)
            }
        }))
        .pipe(sourcemaps.init())
        .pipe(typescript(tsOptions))
        .pipe(gulp.dest('app'))
        .pipe(plumber.stop())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('app'));
});
gulp.task('watch', [], function () {
    gulp.watch('app/**/*.ts', ['build-dev']);
});
gulp.task('default', ['es6']);

Can it be that these last two are somehow in conflict ? Thank you.

[usedtobeNemesh]

Furthermore, I tried putting your plunker example on local (added package.json, installed lite server etc) to see if and how it behaves. Could not make it work. Do you by any chance have a zip with such a project ? Thank you. @parker-mike @cstefanache

[usedtobeNemesh]

This is no longer an issue. Thank you.