zip.js is an open-source library (BSD license) for zipping and unzipping files in JavaScript. It uses a Web Worker to do the actual Zip file processing. Here I explain how I got this working in Angular…

Photo by Tomas Sobek on Unsplash

You don’t need all of the files from zip.js to make this work. You only need these 4 files listed below. Copy them into your Angular project. Put them in your src/assets folder as you need them copied into your build output.

The files need to be copied across into the build, because they are loaded directly by the browser to register as a web worker. Linking the scripts directly from the built assets folder is the easiest method I found to do this.

I actually used a separate lib/zip folder, rather than putting them in with my app assets. I then edited my angular.json file so that the scripts are copied across into the build.

{
"glob": "**/*",
"input": "./lib/zip",
"output": "./scripts/"
}

The main zip.js file is then added to your main index.html by adding this before the closing </body> tag:

<script type="text/javascript" src="scripts/zip.js"></script>

I then created a few interfaces, to make it nicer to work with in TypeScript:

I then wrapped the zip.js in a service so I could inject it into my Angular components where needed:

To use this example, inject into another Angular component or service. Then, call getFiles() passing in the file as an argument. For example, pass in a File object as retrieved from the change event on a file input:

<input type="file" (change)="fileChanged($event)">
fileChanged(event) {
const file = event.target.files[0];
...
}

The observable returned by getFiles() resolves to an array of ZipEntry items as defined in the above interface. You can then pass an item from the array to the getData() method on ZipService to unzip and retrieve the data.