简体   繁体   English

引用外部 typescript 文件时如何避免“找不到模块:错误:无法解析 'tslib'”-错误?

[英]How to avoid “Module not found: Error: Can't resolve 'tslib'”-error when referencing an external typescript file?

The question问题

I have a client/server application, where the client is an angular-app.我有一个客户端/服务器应用程序,其中客户端是一个角度应用程序。 The server does provide a couple of typescript-definitions for the API it provides.服务器确实为它提供的 API 提供了几个打字稿定义。 These definitions are loaded from a project-external folder.这些定义是从项目外部文件夹加载的。 So far this worked fine, however now I am upgrading from Angular 7 to Angular 8 (and with that also upgrading Typescript from Version 3.1 to 3.5) and when trying to use a non-static enum from the definitions, this now produces this error:到目前为止,这工作正常,但是现在我正在从 Angular 7 升级到 Angular 8 (并且同时升级 Typescript 会产生从版本 3.1 到现在使用此定义的非静态错误:3.5)

Module not found: Error: Can't resolve 'tslib' in '/path/to/server/definitions'找不到模块:错误:无法解析“/path/to/server/definitions”中的“tslib”

When the api.ts -file is located within the client-dir, then everything works just fine.api.ts文件位于客户端目录中时,一切正常。

Why is this happening and what I can I do about it?为什么会发生这种情况,我能做些什么?

Creating a minimal reproducible example创建一个最小的可重现示例

Here is a quick script to create a minimal example to reproduce:这是一个快速脚本,用于创建一个最小的示例来重现:

mkdir project
cd project
ng new client --minimal=true --skipGit=true --routing=false --style=css
mkdir server
echo 'export enum ApiSample { X = "X" }' > server/api.ts
sed -i 's/"compilerOptions": {/"compilerOptions": {"paths":{"api":["..\/server\/api"]},/' client/tsconfig.json
sed -i -e "1iimport { ApiSample } from 'api';" -e "s/title = 'client';/title = 'client' + ApiSample.X;/" client/src/app/app.component.ts
cd client
npm start

Or, alternatively, to create an example manually:或者,手动创建示例:

  1. Create a new angular project新建angular工程
  2. Create somewhere in the filesystem a file "api.ts" with the content export enum ApiSample { X = "X" }在文件系统的某处创建一个文件“api.ts”,其内容为export enum ApiSample { X = "X" }
  3. In the "tsconfig.json" Add {"paths":{"api":["/path/to/server/api"]} to the compilerOptions在 "tsconfig.json" 中添加{"paths":{"api":["/path/to/server/api"]}compilerOptions
  4. Access the ApiSample.X from any file of the angular project从 angular 项目的任何文件访问ApiSample.X
  5. Run npm start运行npm start

Findings so far迄今为止的发现

  • The migrator added "importHelpers": true in tsconfig.json.迁移器在 tsconfig.json 中添加了"importHelpers": true That is why it worked before and is not working anymore now.这就是为什么它以前有效而现在不再有效的原因。 Specifying "importHelpers": false in tsconfig.json fixes the issue, but of course this option is there for a reason, so that is no final solution在 tsconfig.json 中指定"importHelpers": false解决了这个问题,但是这个选项当然是有原因的,所以这不是最终的解决方案
  • Explicitly specifying "tslib": ["node_modules/tslib"] fixes the problem.明确指定"tslib": ["node_modules/tslib"]解决了这个问题。 This may be a final solution although it would be interesting to know what is exactly happening and where this is documented.这可能是最终的解决方案,尽管了解到底发生了什么以及记录在哪里会很有趣。

Angular 8&9 Angular 8&9

So for Angular 8 and 9 it seem that adding "tslib": ["node_modules/tslib"] to compilerOptions/paths in the tsconfig.json does solve the problem.因此,对于 Angular 8 和 9,似乎将"tslib": ["node_modules/tslib"]添加到 tsconfig.json 中的compilerOptions/paths确实可以解决问题。

Angular 10 Angular 10

In Angular 10 the problem disappeared altogether, no workaround is needed anymore.在 Angular 10 中,问题完全消失了,不再需要解决方法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM