tsconfig.json ignored by Visual Studio Code

Question

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.

Answer 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.