Angular-cli: Failed to build project with JSZip library

[ovchinnikov]

Versions

Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

• ng new jszip-test
• cd .\jszip-test\
• npm i --save jszip
• Add the following code in app.component.ts:

import * as JSZip from 'jszip';
...
constructor() {
    const zip = new JSZip();
}

• ng build

Observed behavior

ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in 'C:\dev\jszip-test\node_modules\jszip\lib'

Desired behavior

Should be able to build a project without errors.

Mention any other details that might be useful (optional)

This works as expected with angular-cli 1.7

[kodermax]

I have the same error.

[ps-arndwestermann]

Same for me. :s

[051181]

Same for me

[Walgermo]

Same 👎

[kodermax]

My short fix:
node_modules/jszip/lib/readable-stream-browser.js

module.exports = require("readable-stream");

[ps-arndwestermann]

Worked for me as well, thank you! :)

[frohrka]

I have the same error message with ng serve.

[jtsom]

Same here as @frohrka . But I don't specifically have jszip in my package.json

[ps-arndwestermann]

I had the same problem as @frohrka, but i tried the solution from @kodermax and it worked for me. Just give it a try. ^^

[jtsom]

Yes, that did work, but seems to be a hacky workaround....Next time the packages are updated/reloaded, will have to do that again. Not ideal.

[clydin]

Please see the following comment: https://github.com/angular/angular-cli/issues/9827#issuecomment-369647555

Duplicate of #9827

[sachinpachori]

@kodermax How this can be fixed when you are running the build from the build pipeline?
How will you modify to add the following in node_modules/jszip/lib/readable-stream-browser.js in the build pipeline as the node modules are installed on the fly:
module.exports = require("readable-stream");

[clydin]

@sachinpachori Please see this comment: https://github.com/angular/angular-cli/issues/9827#issuecomment-369647555

[kodermax]

It was hot fix.
Right fix:
tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "paths": {
      "jszip": [
        "../node_modules/jszip/dist/jszip.js"
      ]
    },
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

[sachinpachori]

I tried it with and without 2 dots before node_modules in the path....still getting the error: Module not found: Error: Can't resolve 'stream' in 'D:\a\1\s\node_modules\jszip\lib'

[sachinpachori]

ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in 'D:\a\1\s\node_modules\jszip\lib'

[clydin]

Correct solution is in the comment linked above.

[sachinpachori]

@clydin If you are mentioning about your comment on Mar 2 then that is what I tried and still facing the error mentioned above.

[ztimson]

@sachinpachori I added this to my package.json file

"scripts": {
    ...
    "fix": "echo \"module.exports = require('readable-stream');\" > ./node_modules/jszip/lib/readable-stream-browser.js",
    ...
}

Than in your build script:

npm install
npm run fix
ng build // Or what ever you use

Not ideal but it works

[sachinpachori]

Thanks @ztimson. I created a custom npm task in build definition and put the command "npm run fix" there and getting the error:

2018-05-10T14:02:14.3003498Z ##[section]Starting: npm custom
2018-05-10T14:02:14.3007801Z ==============================================================================
2018-05-10T14:02:14.3007932Z Task : npm
2018-05-10T14:02:14.3008087Z Description : Install and publish npm packages, or run an npm command. Supports npmjs.com and authenticated registries like Package Management.
2018-05-10T14:02:14.3008224Z Version : 1.0.15
2018-05-10T14:02:14.3008315Z Author : Microsoft Corporation
2018-05-10T14:02:14.3008444Z Help : More Information
2018-05-10T14:02:14.3008583Z ==============================================================================
2018-05-10T14:02:14.8279081Z [command]C:\Windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npm.cmd" --version"
2018-05-10T14:02:15.6352692Z 5.6.0
2018-05-10T14:02:17.4149201Z [command]C:\Windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npm.cmd" config list"
2018-05-10T14:02:18.2362575Z ; cli configs
2018-05-10T14:02:18.2363735Z metrics-registry = "https://registry.npmjs.org/"
2018-05-10T14:02:18.2364679Z scope = ""
2018-05-10T14:02:18.2364879Z user-agent = "npm/5.6.0 node/v8.11.1 win32 x64"
2018-05-10T14:02:18.2364996Z
2018-05-10T14:02:18.2365154Z ; environment configs
2018-05-10T14:02:18.2365309Z cache = "C:\npm\cache"
2018-05-10T14:02:18.2365447Z prefix = "C:\npm\prefix"
2018-05-10T14:02:18.2365644Z userconfig = "D:\a\1\npm\57.npmrc"
2018-05-10T14:02:18.2365762Z
2018-05-10T14:02:18.2365890Z ; builtin config undefined
2018-05-10T14:02:18.2366022Z
2018-05-10T14:02:18.2366183Z ; node bin location = C:\Program Files\nodejs\node.exe
2018-05-10T14:02:18.2366321Z ; cwd = D:\a\1\s
2018-05-10T14:02:18.2366457Z ; HOME = C:\Users\VssAdministrator
2018-05-10T14:02:18.2366618Z ; "npm config ls -l" to show all defaults.
2018-05-10T14:02:18.2366726Z
2018-05-10T14:02:18.2421686Z [command]C:\Windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npm.cmd" npm run fix"
2018-05-10T14:02:19.1758045Z
2018-05-10T14:02:19.1758607Z Usage: npm
2018-05-10T14:02:19.1758763Z
2018-05-10T14:02:19.1758953Z where is one of:
2018-05-10T14:02:19.1759110Z access, adduser, bin, bugs, c, cache, completion, config,
2018-05-10T14:02:19.1759284Z ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,
2018-05-10T14:02:19.1759460Z explore, get, help, help-search, i, init, install,
2018-05-10T14:02:19.1759610Z install-test, it, link, list, ln, login, logout, ls,
2018-05-10T14:02:19.1759782Z outdated, owner, pack, ping, prefix, profile, prune,
2018-05-10T14:02:19.1759950Z publish, rb, rebuild, repo, restart, root, run, run-script,
2018-05-10T14:02:19.1760101Z s, se, search, set, shrinkwrap, star, stars, start, stop, t,
2018-05-10T14:02:19.1760250Z team, test, token, tst, un, uninstall, unpublish, unstar,
2018-05-10T14:02:19.1760413Z up, update, v, version, view, whoami
2018-05-10T14:02:19.1760519Z
2018-05-10T14:02:19.1760649Z npm -h quick help on
2018-05-10T14:02:19.1761095Z npm -l display full usage info
2018-05-10T14:02:19.1761289Z npm help search for help on
2018-05-10T14:02:19.1761456Z npm help npm involved overview
2018-05-10T14:02:19.1761580Z
2018-05-10T14:02:19.1761755Z Specify configs in the ini-formatted file:
2018-05-10T14:02:19.1761920Z D:\a\1\npm\57.npmrc
2018-05-10T14:02:19.1762099Z or on the command line via: npm --key value
2018-05-10T14:02:19.1762298Z Config info can be viewed via: npm help config
2018-05-10T14:02:19.1762686Z
2018-05-10T14:02:19.1762853Z [email protected] C:\Program Files\nodejs\node_modules\npm
2018-05-10T14:02:19.2277079Z ##[warning]Couldn't find a debug log in the cache or working directory
2018-05-10T14:02:19.2286843Z ##[error]Error: Npm failed with return code: 1
2018-05-10T14:02:19.2288809Z ##[section]Finishing: npm custom

What am I doing wrong here?

[sachinpachori]

[clydin]

That solution is confirmed to work. Ensure it is placed in the application's tsconfig not the root tsconfig. Also ensure the path (relative to the baseUrl) matches the project structure. If that error is shown, the path mapping is either not being used or the file is not being found. The files in dist of the jszip package are bundled and self-contained. They will not request other files within the package.

[ztimson]

@sachinpachori I am not sure why, but the error is that it doesn't recognize the command npm run

Can you show me the package.json line where you put the command?

[sachinpachori]

that is what I was wondering too :)

[sachinpachori]

@clydin Earlier I put it in the root one and now I tried it with app tsconfig but it fails with the same error.

[sachinpachori]

@ztimson
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"fix": "echo \"module.exports = require('readable-stream');\" > ./node_modules/jszip/lib/readable-stream-browser.js"
},
"private": true,
"dependencies": {
"@angular/animations": "6.0.0",
"@angular/cdk": "^5.0.0",
"@angular/common": "6.0.0",
"@angular/compiler": "6.0.0",
"@angular/core": "6.0.0",
"@angular/flex-layout": "^5.0.0-beta.14",
"@angular/forms": "6.0.0",
"@angular/http": "6.0.0",
"@angular/material": "^5.0.0",
"@angular/platform-browser": "6.0.0",
"@angular/platform-browser-dynamic": "6.0.0",
"@angular/platform-server": "6.0.0",
"@angular/router": "6.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.2",
"@swimlane/ngx-datatable": "^11.2.0",
"@types/jquery": "^3.2.16",
"angular-draggable": "^1.0.1",
"angular-froala-wysiwyg": "^2.7.2-1",
"angular-split": "^1.0.0-rc.0",
"angular2-resizable": "^0.4.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"devextreme": "^17.2.3",
"devextreme-angular": "^17.2.3",
"froala-editor": "^2.7.2",
"jszip": "^3.1.5",
"marked": "^0.3.6",
"ng2-bootstrap-modal": "^1.0.1",
"ng2-file-upload": "^1.3.0",
"ng2-split-pane": "^1.4.0",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"ts-helpers": "^1.1.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/cli": "^6.0.0",
"@angular/compiler-cli": "6.0.0",
"@angular/language-service": "6.0.0",
"@swimlane/ngx-datatable": "11.2.0",
"@types/jasmine": "2.5.53",
"@types/marked": "^0.0.28",
"@types/node": "~7.0.16",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.1",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.6.0",
"karma-chrome-launcher": "~2.1.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.7.2",
"protractor": "~5.1.0",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.6",
"ts-node": "~3.0.3",
"tslint": "~5.2.0",
"typescript": "2.7.2",
"@angular-devkit/build-angular": "~0.6.0"
}

[ztimson]

@sachinpachori if you look at my snippit again I escaped the quotes with a backslash. Your code isn't escaping them.

[sachinpachori]

@ztimson It is missed while pasting but I checked it is there in the checked in code and not working. Do I need to use your solution in addition to what clydin suggested or need to use yours only? Moreover," npm run" is not recognized and it shall not be related to the escape character I guess. Do you have a working build definition which you can share?

[sachinpachori]

It is fixed now. Thanks @ztimson your fix worked. Issue was in build definition.

[SpiraMira]

Thanks @ztimson your fix worked like a charm!

[aifrim]

npm i stream - worked for me

[ztimson]

@aifrim Worked for me

[nhustak]

@aifrim npm i stream also worked fo rme

[apeter10]

@aifrim Worked for me

[baree2008]

@aifrim work for me.

[cesarochoa2006]

@aifrim npm i stream also worked fo rme

This is the true solution. All the answers before trigger workarounds, but no solutions

[tmtron]

Please see the following comment: #9827 (comment)

Duplicate of #9827

this solution causes other issues - see Stackoverflow: typescript does not find jszip types

So the better option, in my opinion, is to install the stream package

npm i stream

as answered by @aifrim comment-link

[Zymex]

npm i stream - worked for me

This just worked for me with Angular 8. Angular Templates & ASP.NET Core don't seem to play nicely. This is the true fix, everything else is work-around.

[AkashKumarKhatri]

Angular 7

ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in 'D:\MIMS\MIMS_Angular\node_modules\jszip\lib'

I am facing this issue in my application after added.

DevExtreme

Then after some searching, I found this solution.

_I Just replace:_
module.exports = require("stream");
_With:_
module.exports = require("readable-stream");

In readable-stream-browser.js

It perfectly works for me, I don't recommend you to go for this approach it is one the approach that is a good solution.

Thanks! Happy Coding

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}