Angular-cli: Cannot find module "tslib"

[jacopolanzoni]

Bug Report or Feature Request (mark with an x)

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

Area

- [ ] devkit
- [ ] schematics

Versions

Angular CLI: 6.0.8
Node: 8.11.3
OS: darwin x64
Angular: 6.0.5

Repro steps

I have got an angular library in my-app/projects/my-angular-lib.
My my-app/projects/my-angular-lib/karma.conf.js is as follows:

module.exports = function (config) {
  config.set({
    basePath: './',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

The log given by the failure

$ node_modules/.bin/ng test my-angular-lib
  0% compiling(node:7044) DeprecationWarning: Tapable.plugin is deprecated. Use new APIon `.hooks` instead
05 07 2018 17:17:46.301:WARN [karma]: No captured browser, open http://localhost:9876/
05 07 2018 17:17:46.306:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
05 07 2018 17:17:46.306:INFO [launcher]: Launching browser Chrome with unlimited concurrency
05 07 2018 17:17:46.310:INFO [launcher]: Starting browser Chrome
05 07 2018 17:17:50.840:WARN [karma]: No captured browser, open http://localhost:9876/
05 07 2018 17:17:50.976:INFO [Chrome 67.0.3396 (Mac OS X 10.13.5)]: Connected on socketJ66OtIkcg5hfhJm_AAAA with id 49503961
Chrome 67.0.3396 (Mac OS X 10.13.5) ERROR
  Uncaught Error: Cannot find module "tslib".
  at http://localhost:9876/_karma_webpack_/main.js:150
Chrome 67.0.3396 (Mac OS X 10.13.5) ERROR
  Uncaught Error: Cannot find module "tslib".
  at http://localhost:9876/_karma_webpack_/main.js:150

Chrome 67.0.3396 (Mac OS X 10.13.5) ERROR
  Uncaught Error: Cannot find module "tslib".
  at http://localhost:9876/_karma_webpack_/main.js:150

Desired functionality

Tests should run fine.

[mikyladewitt]

Unknown if this is related to your bug, but for me I only get this when I include using NO_ERRORS_SCHEMA and I include it from @angular/compiler/src/core rather than from @angular/core. Any chance you have a similar import issue?

[jacopolanzoni]

It may be. I did use NO_ERRORS_SCHEMA and imported automatically, so it may have been @angular/compiler/src/core. I then reverted all my changes so I cannot verify that, but thanks a lot.

[DerrickF]

Thank you so much @mikyladewitt I've been fighting this for hours! I can verify that if you import NO_ERRORS_SCHEMAfrom @angular/compiler/src/core rather than from @angular/core then it errors out when running tests. I do wish it gave me more info than just saying
Uncaught Error: Cannot find module "tslib". at http://localhost:9876/_karma_webpack_/main.js:155

[Sharondio]

This also shows up if you import CUSTOM_ELEMENTS_SCHEMA from @angular/compiler/src/core. Note to self: don't always trust auto-import in VSCode.

[rvalimaki]

Yup, importing ViewEncapsulation from '@angular/compiler/src/core' did break it for me. Pretty annoying problem to find out, as stack trace did not hint to the right direction at all.

[TristanMarion]

Same issue happens when importing ChangeDetectionStrategy from @angular/compiler/src/core, importing it from @angular/core fixed it.

[sanja369]

I did run in cmd:
npm i tslib

and used NO_ERRORS_SCHEMA @angular/core
fixed it

[Malex]

This also shows up if you import CUSTOM_ELEMENTS_SCHEMA from @angular/compiler/src/core. Note to self: don't always trust auto-import in VSCode.

Got the same problem with auto import
I guess the issue is having the same name, if only there was a way to issue a warning to console when imported

[glodzienski]

I do not know if anyone has this problem yet, but for me, I ran the 'npm install' with sudo, so the problem started.

To solve the problem, I returned the owner and group from the node_modules folder to mine, and it worked.

[rupeshtiwari]

In My case When I import from @angular/core then it worked.
VSCode imported ChangeDetectionStrategy from @angular/compiler/src/core

Below is the fix for my case.

import {ChangeDetectionStrategy } from '@angular/core';

[kellyprankin]

Same issue happens when importing ChangeDetectionStrategy from @angular/compiler/src/core, importing it from @angular/core fixed it.

Thank you for this. Saved my butt.

[jpike88]

Just ran into this issue, have opened it in TS as it might be a TS bug

https://github.com/microsoft/TypeScript/issues/32222

Current workaround is to use import-blacklist function of tslint

[mgechev]

@jpike88 thanks for pointing this out! Doesn't seem related to Angular CLI itself. Closing the issue for now. If you keep seeing it and you're confident it's a problem in the CLI feel free to open a new one.

[benmed00]

https://stackoverflow.com/questions/51732554/cannot-find-module-tslib#new-answer

[arindamdawn]

In My case When I import from @angular/core then it worked.
VSCode imported ChangeDetectionStrategy from @angular/compiler/src/core

Below is the fix for my case.

import {ChangeDetectionStrategy } from '@angular/core';

thanks @rupeshtiwari You saved my day.

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