问题
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.
回答1:
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.
来源:https://stackoverflow.com/questions/40952254/tsconfig-json-ignored-by-visual-studio-code