【问题标题】:Cannot find module "tslib"找不到模块“tslib”
【发布时间】:2019-01-14 21:13:53
【问题描述】:

我遇到了这个问题,到目前为止似乎没有任何答案。虽然我在我的 node_modules 文件夹中看到了 tslib。感谢是否有人可以帮助确定我的代码有什么问题。我已经看到对类似问题的其他回复,我尝试删除 node_modules 并重建整个项目。但我仍然遇到同样的问题

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)

包.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"
    ]
  }
}
更新

数据服务.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();
    }

}

【问题讨论】:

  • 你能显示你的 ./src/app/data.service.ts 吗?我想@angular/core 导入有些问题……
  • @dhilt 我用 dataservice.ts 更新了问题
  • 看来我是对的,现在你可以接受你自己的答案了。

标签: angular build node-modules


【解决方案1】:

我通过删除类型的错误导入解决了这个问题。这应该来自 Angular Core

删除

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

更新

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

【讨论】:

  • +1 先生/女士,您值得拥有超过 48 名声望!!我刚刚花了几个小时在 github 问题上愉快地搜寻,试图弄清楚我的 Angular 项目发生了什么翻转。在导入 ChangeDetectionStrategy.. 时,我显然没有仔细检查自动 vs-code 导入。
  • +1 这里也有同样的问题。更改导入 { NO_ERRORS_SCHEMA } '@angular/compiler/src/core';从“@angular/core”导入 { NO_ERRORS_SCHEMA };
  • +1 我刚学会小心使用从'@angular/compiler/src/core'导入ChangeDetectionStrategy的Visual Studio Code自动导入功能; THX 我正在疯狂调试这个......
  • 这也让我着迷,对我来说也是从错误模块导入的 NO_ERRORS_SCHEMA。导出中的名称冲突在 Angular 的不同内部模块中也很少见。
  • @Sri Sris 担任总裁,我们继续前进!
【解决方案2】:

我正在使用我构建的打字稿模块 在一个javascript项目中。出现这个错误是因为我在tsconfig.json中有"importHelpers": true,,所以我改成"importHelpers": false,,构建不再需要tslib

【讨论】:

    【解决方案3】:

    我遇到了同样的问题。但通过更新节点模块解决了它 npm 更新

    【讨论】:

      【解决方案4】:

      我有类似的问题,我运行这个命令

      npm 安装

      而且效果很好。

      【讨论】:

        【解决方案5】:

        我遇到了同样的问题,通过删除此导入行解决了

        import { error } from '@angular/compiler/src/util';
        

        注意:我正在运行 Angular v11

        【讨论】:

        • 这对我来说实际上是一个有效的答案和解决方案。问题是,如果您不小心从 '@angular/compiler/src/util' 导入某些内容,则在构建“关键依赖项:require 函数的使用方式无法静态提取依赖项”时可能会收到此警告,这会导致浏览器中的错误 tslib 错误。解决对@angular/compiler/src/util 的引用解决了这个问题。 stackoverflow.com/questions/51319209/…
        • 这里也一样,只是导入无效(我是从 @angular/compiler/src/core 而不是 @angular/core 导入 ViewEncapsulation)
        【解决方案6】:

        对我来说,问题在于 typescript 的错误版本 - 我有 2.6.x。预感我升级到了最新的 3.1.6,然后我收到了这条有用的信息

        Angular 编译器需要 TypeScript >=2.7.2 和

        所以我尝试了 2.9.2 并解决了问题。

        【讨论】:

          猜你喜欢
          • 2018-09-05
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2019-03-19
          • 2021-05-05
          • 2022-12-15
          • 1970-01-01
          相关资源
          最近更新 更多