angular - 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();
    }

}

question from:https://stackoverflow.com/questions/51732554/cannot-find-module-tslib

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';