Using with Angular - multiple frustrations

[chrisd-cotswold]

I am upgrading a legacy app from AngularJS to Angular; this uses resumablejs.
I have spent a lot of time trying to get it working, but as of yet I have been unable to find a 100% satisfactory solution.
I am hoping someone could help, otherwise I will have to look at a much bigger task of finding and using an alternative.

1. import { Resumable } from 'resumablejs';
   -- Module '"resumablejs"' has no exported member 'Resumable'.
   -- This module can only be referenced with ECMAScript imports/exports by turning on the 'esModuleInterop' flag and referencing its default export.

I read loads of issues, conversations and pull request comments, talking about this, some even suggesting fixes have been written and PRs merged, but... npm is only updated to v1.1.0 and one post suggests that v.1.1.2 is what is required. So why is npm not being kept up to date?

So I tried DL, the latest code based from the master branch and this doesn't work either. I am told resumablejs is not a module.

I then found what looks like a fork of resumablejs, under @seafile/resumablejs on npm, this appears to have updated up to 1.1.15, but after removing all old versions and installing both v1.1.2 & v1.1.15, neither of those worked. Same issue complaining about not being a module.

What is most frustrating is that I got the damn thing working using a simple require(), but it won't build to production.

I have both these items in my tsconfig:
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,

I have tried everything I can find that is documented.

So if nothing else, can someone please just tell me if they have successfully used this library with Angular 6 or similar?
If you are able to provide any help on implementing it, that would be great.

If not, can anyone recommend alternatives, that could be used with Angular ?

[RobDaPraia]

Problem is in the resumable.d.ts, almost the last line:
export = Resumable.Resumable;

have a look at the latest version: https://github.com/23/resumable.js/blob/master/resumable.d.ts
export = Resumable;

You can update the file under \node_modules\resumablejs\resumable.d.ts

But probably this manual change will be overwritten when doing a "npm install"

[bigBear713]

you can use require like declare const Resumable = require('resumablejs');.but it is not recommend，wish the resumable.js could support the method import { Resumable } from 'resumablejs';

[tenji73]

i came across this this posting yesterday while upgrading my angularjs project to angular 8 and had the same issue. i ended up saving a ‘resumable.min.js’ inside of my assets folder and injecting it into the component via javascript..

ngOnInit() {
	this.injectScript('/assets/resumable.min.js')
		.then(() => { console.log('Script loaded!'); this.setupResumable(); })
		.catch(error => { console.log(error); });	
}

setupResumable() {
	var r = new Resumable({
		target:'/api/photo/redeem-upload-token',
		query:{upload_token:'my_token'}
	});
	console.log(r); // IT WORKS!
}

injectScript(src) {
	return new Promise((resolve, reject) => {
		const script = document.createElement('script');
		script.async = true;
		script.src = src;
		script.addEventListener('load', resolve);
		script.addEventListener('error', () => reject('Error loading script.'));
		script.addEventListener('abort', () => reject('Script loading aborted.'));
		document.head.appendChild(script);
	});
}

additionally you'll need to declare the var in a new resumable-js.d.ts in your app folder:
declare var Resumable: any;

best regards!
tom