ES Modules support

[nomego]

Any plan to support ES modules?

Basically all that is required is

export { saveAs };

at the end, similarly to the module.exports today.
This could also be stripped (if deemed necessary) when compiling the dist output.

[manukieli]

Any plan to support ES modules?

Basically all that is required is

export { saveAs };

at the end, similarly to the module.exports today.
This could also be stripped (if deemed necessary) when compiling the dist output.

Good idea.
When I add at the final:
export { saveAs };

It not work.

[LoganDupont]

Currently using file-saver in an Angular version 10+ application gives the following build warning:

WARNING in [filename] depends on 'file-saver'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Starting with Angular 10 the Angular CLI now provide warnings for CommonJS modules. Read more about it here:
https://blog.angular.io/version-10-of-angular-now-available-78960babd41

When you use a dependency that is packaged with CommonJS, it can result in larger slower applications.
Starting with version 10, we now warn you when your build pulls in one of these bundles. If you’ve started seeing these warnings for your dependencies, let your dependency know that you’d prefer an ECMAScript module (ESM) bundle.

And here:
https://angular.io/guide/build#configuring-commonjs-dependencies

It is recommended that you avoid depending on CommonJS modules in your Angular applications. Depending on CommonJS modules can prevent bundlers and minifiers from optimizing your application, which results in larger bundle sizes. Instead, it is recommended that you use ECMAScript modules in your entire application. For more information, see How CommonJS is making your bundles larger

[mdantonio]

Hello, I reached this issue by looking for any solution for the Angular 10 warnings (CommonJS or AMD dependencies can cause optimization bailouts.), rather that simply ignore them by configuring allowedCommonJsDependencies in angular.json.

Is there any plan to build file-saver as ECMAScript module and make Angular happy?

[Pizzicato]

Any news about this?

[vickyRathee]

Any ETA ?

I am getting warning in VS code using Angular 11.0.5

Warning: app.component.ts depends on 'file-saver'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

[HarelM]

Same here, would love to see this resolved...

[ulisesmorenomassachusetts]

file-saver-es worked for me for now, im happy.

[HarelM]

@ulisesmorenomassachusetts thanks! I was sure I searched for it and it wasn't updated recently... I might be confusing with another library probably. Thanks for the input! :-)

[HarelM]

To summarize my changes:

1. uninstall file-saver
2. install file-saver-es
3. Change imports to user file-saver-es instead of file-saver
4. (I'm using typescript) add the following to the tsconfig.json file to let the compiler know where the typing are:

"paths": {
      "file-saver-es": [
        "@types/file-saver"
      ]
    }

It would be nice to simply include the typings of this library inside this repository and reduce the need to install @types/file-saver, but that's a completely different issues...

[AlexGuironnetRTE]

@HarelM Thanks for sharing! I tried to do the same but I'm getting:

ERROR in ./src/app/services/export.service.ts 29:8-17
"export 'default' (imported as 'FileSaver') was not found in 'file-saver-es'

Anyone else running into the same issue?

[HarelM]

My import statement is not using the default but rather the following:
import { saveAs, FileSaverOptions } from "file-saver-es";
See here:
https://github.com/IsraelHikingMap/Site/blob/master/IsraelHiking.Web/src/application/services/non-angular-objects.factory.ts

[AlexGuironnetRTE]

My import statement is not using the default but rather the following:
import { saveAs, FileSaverOptions } from "file-saver-es";
See here:
https://github.com/IsraelHikingMap/Site/blob/master/IsraelHiking.Web/src/application/services/non-angular-objects.factory.ts

I thought I'd tried that as well yesterday with the same error but I tried again and you're right it works ! Thanks a lot!

[axul]

there is an issue when setting "strict ": true in tsconfig because @types/file-saver-es does not exist. There is only @types/file-saver. I solved this temporarily by declaring a type inside my app.

[ghost]

just add

"allowedCommonJsDependencies": [
"file-saver"
],

into Angular.json

https://angular.io/guide/build#configuring-commonjs-dependencies

[Harpush]

Any news?

[junInUK]

To summarize my changes:

1. uninstall file-saver
2. install file-saver-es
3. Change imports to user file-saver-es instead of file-saver
4. (I'm using typescript) add the following to the tsconfig.json file to let the compiler know where the typing are:

"paths": {
      "file-saver-es": [
        "@types/file-saver"
      ]
    }

It would be nice to simply include the typings of this library inside this repository and reduce the need to install @types/file-saver, but that's a completely different issues...

I used this way. But still gave me [ERROR] TS7016: Could not find a declaration file for module 'file-saver-es'.
Suggested me to
Try npm i --save-dev @types/file-saver-es if it exists or add a new declaration (.d.ts) file containing declare module 'file-saver-es'; [plugin angular-compiler]

[freekwiekmeijer]

To summarize my changes:

1. uninstall file-saver
2. install file-saver-es
3. Change imports to user file-saver-es instead of file-saver
4. (I'm using typescript) add the following to the tsconfig.json file to let the compiler know where the typing are:

"paths": {
      "file-saver-es": [
        "@types/file-saver"
      ]
    }

Here in step 4 you are reusing the typescript type definitions from the file-saver npm package for file-saver-es. It works, but there's a more elegant solution.

You can simply replace the npm package @types/file-saver with @types/file-saver-es in package.json file.