Cannot find module "tslib"

Question

I am experiencing this issue and don't seem to have any answer so far. Although I see tslib in my node_modules folder. Appreciate if anyone can help identify whats wrong with my code. I have seen other responses to similar question, I tried removing node_modules and rebuild the whole project. But I still get the same issue

Uncaught Error: Cannot find module "tslib".     at webpackEmptyContext (VM2488 main.js:11)     at VM2487 vendor.js:30768     at push../node_modules/@angular/compiler/src/core.js (VM2487 vendor.js:30756)     at Object../node_modules/@angular/compiler/src/core.js (VM2487 vendor.js:30765)     at __webpack_require__ (VM2484 runtime.js:77)     at Object../src/app/data.service.ts (VM2488 main.js:2712)     at __webpack_require__ (VM2484 runtime.js:77)     at Object../src/app/Security/Security.service.ts (VM2488 main.js:1923)     at __webpack_require__ (VM2484 runtime.js:77)     at Object../src/app/Security/Security.component.ts (VM2488 main.js:1556) 

Package.json

{   "name": "ranetworkfe",   "version": "0.0.0",   "scripts": {     "ng": "ng",     "start": "ng serve",     "build": "ng build",     "test": "ng test",     "lint": "ng lint",     "e2e": "ng e2e"   },   "private": true,   "dependencies": {     "@angular/animations": "^6.0.3",     "@angular/cli": "^6.1.2",     "@angular/common": "^6.0.3",     "@angular/compiler": "^6.0.3",     "@angular/core": "^6.0.3",     "@angular/forms": "^6.0.3",     "@angular/http": "^6.0.3",     "@angular/platform-browser": "^6.0.3",     "@angular/platform-browser-dynamic": "^6.0.3",     "@angular/router": "^6.0.3",     "bootstrap": "^4.1.3",     "core-js": "^2.5.4",     "express": "^4.16.3",     "font-awesome": "^4.7.0",     "jasmine": "^3.1.0",     "jquery": "^3.3.1",     "rxjs": "^6.2.2",     "rxjs-compat": "^6.2.2",     "tslib": "^1.9.3",     "zone.js": "^0.8.26"   },   "devDependencies": {     "@angular-devkit/build-angular": "~0.6.8",     "@angular/cli": "^6.1.2",     "@angular/compiler-cli": "^6.0.3",     "@angular/language-service": "^6.0.3",     "@types/jasmine": "~2.8.6",     "@types/jasminewd2": "~2.0.3",     "@types/node": "~8.9.4",     "codelyzer": "~4.2.1",     "jasmine-core": "~2.99.1",     "jasmine-spec-reporter": "~4.2.1",     "karma": "~1.7.1",     "karma-chrome-launcher": "~2.2.0",     "karma-coverage-istanbul-reporter": "~2.0.0",     "karma-jasmine": "~1.1.1",     "karma-jasmine-html-reporter": "^0.2.2",     "protractor": "^5.4.0",     "ts-node": "~5.0.1",     "tslint": "~5.9.1",     "tslib": "^1.9.3",     "typescript": "~2.7.2"   } } 

tsconfig.js

{   "compilerOptions": {     "baseUrl": "",     "declaration": false,     "emitDecoratorMetadata": true,     "experimentalDecorators": true,     "lib": ["es6", "dom"],     "mapRoot": "./",     "module": "es6",     "moduleResolution": "node",     "outDir": "../dist/out-tsc",     "sourceMap": true,     "target": "es5",     "importHelpers": true,     "typeRoots": [       "../node_modules/@types"     ]   } } 

UPDATED

DataService.ts

/*  * Licensed under the Apache License, Version 2.0 (the "License");  * you may not use this file except in compliance with the License.  * You may obtain a copy of the License at  *  * http://www.apache.org/licenses/LICENSE-2.0  *  * Unless required by applicable law or agreed to in writing, software  * distributed under the License is distributed on an "AS IS" BASIS,  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  * See the License for the specific language governing permissions and  * limitations under the License.  */  import { Injectable } from '@angular/core'; import { Http, Response, Headers } from '@angular/http'; import { Observable } from 'rxjs'; import { map, filter, scan, catchError } from 'rxjs/operators'; import { Type } from '@angular/compiler/src/core';  @Injectable() export class DataService<Type> {     private resolveSuffix = '?resolve=true';     private actionUrl: string;     private headers: Headers;      constructor(private http: Http) {         this.actionUrl = '/api/';         this.headers = new Headers();         this.headers.append('Content-Type', 'application/json');         this.headers.append('Accept', 'application/json');     }      public getAll(ns: string): Observable<Type[]> {         console.log('GetAll ' + ns + ' to ' + this.actionUrl + ns);         return this.http.get(`${this.actionUrl}${ns}`).pipe(             map(response => {                 const chamados = response.json();                 return chamados.map((chamado) => new Type(chamado));                // catchError(this.handleError);             }            // catchError(this.handleError);         )            // catchError(this.handleError);         ).catch(this.handleError)         //.map(this.extractData)              }      public getSingle(ns: string, id: string): Observable<Type> {         console.log('GetSingle ' + ns);          return this.http.get(this.actionUrl + ns + '/' + id + this.resolveSuffix).pipe(             //.map(this.extractData)             map(response => {                 const chamados = response.json();                 return chamados.map((chamado) => new Type(chamado));             }             )         )         //catchError(this.handleError);     }      public add(ns: string, asset: Type): Observable<Type> {         console.log('Entered DataService add');         console.log('Add ' + ns);         console.log('asset', asset);          return this.http.post(this.actionUrl + ns, asset).pipe(             //.map(this.extractData)             map(response => {                 const chamados = response.json();                 return chamados.map((chamado) => new Type(chamado));             }))        // catchError(this.handleError);         //.map(this.extractData)         //.catch(this.handleError);     }      public update(ns: string, id: string, itemToUpdate: Type): Observable<Type> {         console.log('Update ' + ns);         console.log('what is the id?', id);         console.log('what is the updated item?', itemToUpdate);         console.log('what is the updated item?', JSON.stringify(itemToUpdate));         return this.http.put(`${this.actionUrl}${ns}/${id}`, itemToUpdate).pipe(             //.map(this.extractData)             map(response => {                 const chamados = response.json();                 return chamados.map((chamado) => new Type(chamado));             }))        // catchError(this.handleError);         // .map(this.extractData)         //.catch(this.handleError);     }      public delete(ns: string, id: string): Observable<Type> {         console.log('Delete ' + ns);          return this.http.delete(this.actionUrl + ns + '/' + id).pipe(             //.map(this.extractData)             map(response => {                 const chamados = response.json();                 return chamados.map((chamado) => new Type(chamado));             }))         //catchError(this.handleError);         // .map(this.extractData)         //.catch(this.handleError);     }      private handleError(error: any): Observable<string> {         // In a real world app, we might use a remote logging infrastructure         // We'd also dig deeper into the error to get a better message         const errMsg = (error.message) ? error.message :             error.status ? `${error.status} - ${error.statusText}` : 'Server error';         console.error(errMsg); // log to console instead         return Observable.throw(errMsg);     }      private extractData(res: Response): any {         return res.json();     }  } 

Answer 1

I resolved the issue by removing the wrong import for the Type. This should be coming from Angular Core

removed

import { Type } from '@angular/compiler/src/core'; 

updated

import { Injectable, Type } from '@angular/core'; 

Answer 2

I was using a typescript module I built in a javascript project. This error occurred because I had "importHelpers": true, in the tsconfig.json, so I changed it to "importHelpers": false,, and the build no longer required tslib.