Angular-cli: Runtime Error in Prod build due to build-optimizer: Cannot find module tslib

Created on 10 Nov 2017  Â·  14Comments  Â·  Source: angular/angular-cli

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / â–³ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.0
Node: 9.0.0
OS: linux x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.1
typescript: 2.6.1
webpack: 3.8.1

Repro steps.

1) package.json:

  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "angular2-froala-wysiwyg": "^2.6.0",
    "angular2-notifications": "^0.9.6",
    "bootstrap-sass": "^3.3.7",
    "core-js": "^2.5.1",
    "d3-ng2-service": "^1.22.1",
    "jquery": "^3.2.1",
    "ng-select": "^1.0.0-rc.3",
    "ng2-dnd": "^4.2.0",
    "ng2-translate": "^5.0.0",
    "ngx-bootstrap": "^2.0.0-beta.8",
    "ngx-chips": "^1.5.9",
    "ngx-perfect-scrollbar": "^5.0.0-7",
    "ngx-slimscroll": "^3.4.1",
    "rxjs": "^5.5.2",
    "ts-helpers": "^1.1.2",
    "tslib": "^1.8.0",
    "typescript": "^2.6.1",
    "videogular2": "^5.6.3",
    "web-animations-js": "^2.3.1",
    "youtube-player": "^5.4.0",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.0",
    "@types/core-js": "^0.9.43",
    "@types/jasmine": "2.6.3",
    "@types/node": "^8.0.50",
    "archiver": "^2.1.0",
    "co": "^4.6.0",
    "codelyzer": "~4.0.1",
    "es6-promise": "^4.1.1",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-remap-istanbul": "^0.6.0",
    "multi-progress": "^2.0.0",
    "protractor": "~5.2.0",
    "scp2": "^0.5.0",
    "ssh2": "^0.5.5",
    "ts-node": "3.3.0",
    "tslint": "^5.8.0"
  }

2) ng build --prod
3) serve the app

The log given by the failure.

Uncaught Error: Cannot find module "tslib"
    at Object.<anonymous> (compiler.js:1)
    at __webpack_require__ (bootstrap a80b7ad41f732b859c1d:54)
    at Object.token.token (vendor.js:80606)
    at __webpack_require__ (bootstrap a80b7ad41f732b859c1d:54)
    at Object.251 (cache.ts:5)
    at __webpack_require__ (bootstrap a80b7ad41f732b859c1d:54)
    at webpackJsonpCallback (bootstrap a80b7ad41f732b859c1d:25)
    at main.js:100:

Desired functionality.

build-optimizer should not break the production build

Mention any other details that might be useful.

When I run the build with ng build --prod --build-optimizer=false it works...
Also see https://forum.ionicframework.com/t/uncaught-error-cannot-find-module-tslib-when-update-to-3-9-2/111648

repro steps 1 (urgent) broken bufix
Source
picture khaledosman
👍10

Most helpful comment

Hi guys!
Any news? A year later I have the same error.
Bellow is an issue I created in angular main repo by mistake (copied from https://github.com/angular/angular/issues/26204):

I'm submitting a...


[X] Bug report

Current behavior

I have an runtime error Uncaught Error: Cannot find module 'tslib' in a production build using Angular 6 CLI when I am using default startup project and third party npm typescript library compiled with the default settings:

"importHelpers": false,
"noEmitHelpers": false,

Full tsconfig.json is available here: https://github.com/ethers-io/ethers.js/blob/typescript/tsconfig.json

Commands I'm using for production build: ng serve --prod or ng build --prod.
In development build (ng serve or ng build) the same code works fine.

Expected behavior

ng serve --prod and ng build --prod expected to work without errors like ng serve and ng build.

Minimal reproduction of the problem with instructions

STEPS TO REPRODUCE
I'm generating standard cli starter project with the library:

ng new angular-tslib-issue
cd angular-tslib-issue
yarn add [email protected]

then I add somewhere these test code, for example in the src/app/app.component.ts:

import {ethers} from 'ethers';

  constructor() {
    const bn: ethers.utils.BigNumber = ethers.utils.bigNumberify(1);
    console.log(`BigNumber=`, bn);
  }

Then ng serve works fine but ng serve --prod gives me an Cannot find module 'tslib' error:

Uncaught Error: Cannot find module 'tslib'
    at o (main.34e371fac685d31927eb.js:1)
    at main.34e371fac685d31927eb.js:1
    at Object.Fkem.e.exports.4../abstract-signer (main.34e371fac685d31927eb.js:1)
    at o (main.34e371fac685d31927eb.js:1)
    at main.34e371fac685d31927eb.js:1
    at Object.Fkem.e.exports.6../_version (main.34e371fac685d31927eb.js:1)
    at o (main.34e371fac685d31927eb.js:1)
    at main.34e371fac685d31927eb.js:1
    at Object.Fkem.e.exports.7../ethers (main.34e371fac685d31927eb.js:1)
    at o (main.34e371fac685d31927eb.js:1)

MINIMAL DEMO
I prepared a small repo to demonstrate the issue: https://github.com/asnov/small-test

I also created an issue in the library repository: https://github.com/ethers-io/ethers.js/issues/278 but I believe this is a Angular CLI bug when it runs webpack with wrong config.

What is the motivation / use case for changing the behavior?

When Typescript compiles the library it puts tslib helpers inline to the result file:

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();

So this looks fine and works fine.
Then Angular CLI runs webpack which includes all libraries to the vendor.js file, sees the repeated helpers code, tries to optimize the build and removes the helpers code.
It seems reasonable to replace all inline helpers with the calls to tslib functions.
The problem, as I understand, is that it does not include tslib library code to the resulted build so the library link does not resolved in runtime.

Environment


Angular version: 6.2.0
This is still an issue in the most recent Angular version.

Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox version XX
- [X] Safari (desktop) version XX
- [X] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 9.11.2
- Platform:  Mac
picture asnov on 2 Oct 2018
👍2

All 14 comments

It doesn't seem to break when I run those commands in a brand new app. Can you provide your app or a reproduction where I can see this error?

It might also be generally due to module resolution, which varies between package managers. Which package manager are you using? We might have a bad/missing dependency that doesn't come up in our used package managers.

filipesilva picture filipesilva on 7 Dec 2017

In the meanwhile you should be able to work around this problem by installing tslib in the dev dependencies.

filipesilva picture filipesilva on 7 Dec 2017

I just received the same error , while runnig ng serve --prod --aot=true My app is specific using allot of programatic API, But its hard to identify where is the error when all is uglified.

installing tslib as DEV did not solved me problem. 

main.d32116d81590e76a933f.bundle.js:1 Uncaught Error: Cannot find module 'tslib'
    at o (main.d32116d81590e76a933f.bundle.js:1)
    at o (main.d32116d81590e76a933f.bundle.js:1)
    at main.d32116d81590e76a933f.bundle.js:1
    at Object.e.exports.i.6../Dictionary (main.d32116d81590e76a933f.bundle.js:1)
    at o (main.d32116d81590e76a933f.bundle.js:1)
    at main.d32116d81590e76a933f.bundle.js:1
    at Object.e.exports.i.typescript-collections../BSTree (main.d32116d81590e76a933f.bundle.js:1)
    at o (main.d32116d81590e76a933f.bundle.js:1)
fkolar picture fkolar on 11 Dec 2017
👍1

But after playing around I was able to replicate for my case!

Here is the repo: https://github.com/fkolar/AngularAot

I think problematic part here (in my case) that creates this problem is library that I installed "typescript-collections": "1.2.3"

So I asume in khaledosman case it will be some library that will have dependency to tslib as well.

fkolar picture fkolar on 11 Dec 2017

Hi guys!
Any news? A year later I have the same error.
Bellow is an issue I created in angular main repo by mistake (copied from https://github.com/angular/angular/issues/26204):

I'm submitting a...


[X] Bug report

Current behavior

I have an runtime error Uncaught Error: Cannot find module 'tslib' in a production build using Angular 6 CLI when I am using default startup project and third party npm typescript library compiled with the default settings:

"importHelpers": false,
"noEmitHelpers": false,

Full tsconfig.json is available here: https://github.com/ethers-io/ethers.js/blob/typescript/tsconfig.json

Commands I'm using for production build: ng serve --prod or ng build --prod.
In development build (ng serve or ng build) the same code works fine.

Expected behavior

ng serve --prod and ng build --prod expected to work without errors like ng serve and ng build.

Minimal reproduction of the problem with instructions

STEPS TO REPRODUCE
I'm generating standard cli starter project with the library:

ng new angular-tslib-issue
cd angular-tslib-issue
yarn add [email protected]

then I add somewhere these test code, for example in the src/app/app.component.ts:

import {ethers} from 'ethers';

  constructor() {
    const bn: ethers.utils.BigNumber = ethers.utils.bigNumberify(1);
    console.log(`BigNumber=`, bn);
  }

Then ng serve works fine but ng serve --prod gives me an Cannot find module 'tslib' error:

Uncaught Error: Cannot find module 'tslib'
    at o (main.34e371fac685d31927eb.js:1)
    at main.34e371fac685d31927eb.js:1
    at Object.Fkem.e.exports.4../abstract-signer (main.34e371fac685d31927eb.js:1)
    at o (main.34e371fac685d31927eb.js:1)
    at main.34e371fac685d31927eb.js:1
    at Object.Fkem.e.exports.6../_version (main.34e371fac685d31927eb.js:1)
    at o (main.34e371fac685d31927eb.js:1)
    at main.34e371fac685d31927eb.js:1
    at Object.Fkem.e.exports.7../ethers (main.34e371fac685d31927eb.js:1)
    at o (main.34e371fac685d31927eb.js:1)

MINIMAL DEMO
I prepared a small repo to demonstrate the issue: https://github.com/asnov/small-test

I also created an issue in the library repository: https://github.com/ethers-io/ethers.js/issues/278 but I believe this is a Angular CLI bug when it runs webpack with wrong config.

What is the motivation / use case for changing the behavior?

When Typescript compiles the library it puts tslib helpers inline to the result file:

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();

So this looks fine and works fine.
Then Angular CLI runs webpack which includes all libraries to the vendor.js file, sees the repeated helpers code, tries to optimize the build and removes the helpers code.
It seems reasonable to replace all inline helpers with the calls to tslib functions.
The problem, as I understand, is that it does not include tslib library code to the resulted build so the library link does not resolved in runtime.

Environment


Angular version: 6.2.0
This is still an issue in the most recent Angular version.

Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox version XX
- [X] Safari (desktop) version XX
- [X] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 9.11.2
- Platform:  Mac
asnov picture asnov on 2 Oct 2018
👍2

@Brocco , @filipesilva could you confirm, please, that this is a right place to report this issue and that anybody will take a took on it?

asnov picture asnov on 3 Oct 2018

anybody?

asnov picture asnov on 7 Oct 2018

@asnov this is the right place to report it, yes. I can't seem to follow your reproduction though.

Running

git clone https://github.com/asnov/small-test
cd small-test
yarn

will show the error below:

yarn install v1.10.1
[1/4] Resolving packages...
[2/4] Fetching packages...
error Couldn't find match for "57aa4bbc75f03fd547c2fc2e741981c715431d5a" in "refs/heads/fix/tslib,refs/heads/gh-pages,refs/heads/master,refs/heads/typescript,refs/tags/v0.0.1,refs/tags/v0.0.9,refs/
tags/v1.0.1,refs/tags/v1.0.4,refs/tags/v1.0.5,refs/tags/v3.0.1" for "https://github.com/asnov/ethers.js".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

I also tried deleting yarn.lock which lets me run yarn. But then the build fails with missing imports in the ethers library:

$ yarn build --prod
yarn run v1.10.1
$ ng build --prod

Date: 2018-10-08T10:06:17.604Z
Hash: 1755a4deaff1a9bee3a3
Time: 8588ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.cdf87a8e5b31fe8a11f1.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.a2bc6cab25d0aa41c17a.js (main) 128 bytes [initial] [rendered]

ERROR in src/app/app.component.ts(17,22): error TS2694: Namespace '"D:/sandbox/small-test/node_modules/ethers/ethers"' has no exported member 'BigNumber'.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
filipesilva picture filipesilva on 8 Oct 2018

@filipesilva , yes, without yarn.lock it switched to the next version with changed namespace.
I'm sorry the library was updated to the release so I updated my fork as well and didn't update yarn.lock.
Fixed.
Could you try it again, please?

git clone https://github.com/asnov/small-test
cd small-test
yarn
ng serve --prod -o

It gives an error in console, whereas ng serve works fine.

asnov picture asnov on 10 Oct 2018

@asnov I can reproduce with the update repository.

As far as I can tell, this happens because of the self contained bundle in ethers/dist/ethers.js. Replacing the TS helpers doesn't work there because the require function there is a custom one, and not the node one.

So even though tslib might be in the webpack modules, it's not in within the modules of this self contained bundle.

I think the correct approach here is to identify that the require in the module is a custom one and not replace the helpers.

filipesilva picture filipesilva on 10 Oct 2018
👍1

Yup, I'm getting the same error as @asnov. Looking forward to the PR.

marwan38 picture marwan38 on 12 Oct 2018

It looks like the PR was closed (https://github.com/angular/angular-cli/pull/12556#issuecomment-431095856) and this will be addressed in 7.1 as part of PR https://github.com/angular/angular-cli/pull/12598. Hopefully this will be available soon in 7.1.0-beta.0.

Splaktar picture Splaktar on 22 Oct 2018

Closing the issue. If the issue is still reproducible, please open a new one following the template and link to this for further details. Thank you!

mgechev picture mgechev on 22 Dec 2018

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._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 9 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ankeshdave picture ankeshdave  Â·  161Comments
DennisSmolek picture DennisSmolek  Â·  110Comments
elvisbegovic picture elvisbegovic  Â·  100Comments
DanielStep picture DanielStep  Â·  184Comments
vinodbhargava picture vinodbhargava  Â·  214Comments