ng serve can't resolve imports from src path, but work when using relative path

Question

when importing something using src\app... angular cli gives error " Module not found: Error: Can't resolve 'src/app/shared/k/k-api.service' in 'C:...' ". error TS2307: Cannot find module 'src/app/shared/k/k-api.service'

import { KAPIService } from 'src/app/shared/k/k-api.service';

but when using relative path it works just fine

import { KAPIService } from '../../../../shared/k/k-api.service';

Answer 1

I managed to solve it by changing "baseUrl": "./", to "baseUrl": "./src", in tsconfig.json then

import { KAPIService } from 'app/shared/k/k-api.service';

not sure if this is the best solution, but works for me.

Answer 2

The problem here is that the path 'src/some/path/here' cannot be resolved by the webpack. It is not exactly an absolute path as you might think.

You could try editing the webpack config and adding an alias [refer here : https://webpack.js.org/configuration/resolve/ ]

and adding say something like 'Src' : path.resolve(__dirname, 'src/') so that you can use it as an absolute base Src

Answer 3

Check the moduleResolution property in reconfigure.json. when set to node and given path is not relative, the module is resolved from the node_modules directory from where the webpack is started . If the module is not found, the node module in parent directory is searched (recursive search until the root is reached)

Answer 4

I "solved" this opening the root project directory (the parent of src) in VSCode and not the src directory.