tsconfig.json被Visual Studio代码忽略(tsconfig.json ignored by Visual Studio Code)

tsconfig.json被Visual Studio代码忽略(tsconfig.json ignored by Visual Studio Code)

我在项目的根目录下有一个tsconfig.json文件：

{ "compilerOptions": { "target": "ES5", "module": "commonjs", "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "noEmitHelpers": true, "baseUrl": ".", "paths": { "services/*": ["./src/app/shared/services/*"] } }, "compileOnSave": false, "buildOnSave": false, "awesomeTypescriptLoaderOptions": { "forkChecker": true, "useWebpackText": true } }

我试图定义我的路径，所以我们不需要在项目中使用相对路径。

例如：

我想import { ConfigService } from 'services/config';获取import { ConfigService } from 'services/config'; 工作，而不是必须输入：

import { ConfigService } from '../../shared/services/config/';

但是当我尝试这个时，我一直在webpack中遇到错误。

看起来它只是试图查看/node_nodules并忽略tsconfig.json ？ 我对吗？

我真的不知道我做错了什么。 谷歌搜索超过几个小时，我疯了。

任何帮助，将不胜感激。

I have a tsconfig.json file at the root of my project:

{ "compilerOptions": { "target": "ES5", "module": "commonjs", "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "noEmitHelpers": true, "baseUrl": ".", "paths": { "services/*": ["./src/app/shared/services/*"] } }, "compileOnSave": false, "buildOnSave": false, "awesomeTypescriptLoaderOptions": { "forkChecker": true, "useWebpackText": true } }

I am trying to define my paths so we don't need to use relative paths in the project.

For example:

I am trying to get import { ConfigService } from 'services/config'; to work, instead of having to type:

import { ConfigService } from '../../shared/services/config/';

but I keep getting errors in webpack when I try this.

Looks like it is only trying to look in the /node_nodules and ignoring the tsconfig.json? Am I right?

I really don't know what I'm doing wrong. Been googling for more than a couple hours and am going crazy.

Any help would be appreciated.

最满意答案

注意 ：实际上，你是对的，Webpack不知道tsconfig文件并尝试以自己的方式解析模块。 为了与tsconfig一起使用，你需要一个TsConfigPathsPlugin插件。 请参阅github上的这个问题 。

我认为你的路径属性设置不正确。 您需要告诉typescript这样的事情：

对于匹配模式“services /”的导入，将以下路径附加到导入（asumming，你的根目录是src之前的一个）“/ src / app / shared /”

"paths": { "services/*": ["/src/app/shared/*"] }

因此，当编译器进入“services / config”导入时，它将匹配模式，然后创建此路径“root / src / app / shared / services / config”以尝试解决它。

有关详细信息，请参阅typescript 模块解析文档。

Note: Actually, you were right, Webpack is unaware of the tsconfig file and tries to resolve the modules in its own way. In order to use it with tsconfig you would need a TsConfigPathsPlugin plugin. Please refer to this issue on github.

I think that you paths property is not setup correctly. You would need to tell typescript something like this:

For the imports that match pattern "services/" append the following path to the import (asumming that you root dir is one before src) "/src/app/shared/"

"paths": { "services/*": ["/src/app/shared/*"] }

So, when the compiler gets to your "services/config" import, it will match the pattern and then create this path "root/src/app/shared/services/config" to try and resolve it.

Consult typescript module resolution documentation for more details.