Search code examples
angularvisual-studio-code

tsconfig and paths in angular project

I created Angular application. I'm trying to configure tsconfig and create shortcut-path for my interfaces. I edited tsconfig.app.json, added baseUrl and paths:

"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"baseUrl": "./src",
"paths": {
  "@models/*": ["./app/modules/models/*"]
}

...but I'm still getting error:

ERROR in src/app/modules/atoms/small-table/small-table.component.ts:3:25 - error TS2307: Cannot find 
module '@models'.

3 import { IIncome } from '@models'

file structure: enter image description here

Does somebody know why it not working? How to fix it?

Solution

  • If you're seeing this in VSCode, the issue is probably baseUrl

    Whether you're using tsconfig.json or tsconfig.app.json, you need to ensure that the baseUrl property inside compileOptions is configured properly. Wherever you're setting up your path options with the @ wildcard, ensure your baseUrl points to the right base directory.

    The default is:

    "compilerOptions": {
    "baseUrl": "./",
    ...
}

    Depending on your application's structure, change this to:

    "compilerOptions": {
    "baseUrl": "src",
    ...
}

    or to:

    "compilerOptions": {
    "baseUrl": "./src",
    ...
}

    It looks like in your case, you should use src like this:

    "compilerOptions": {
    "baseUrl": "src",
    ...

    "paths": {
      "@models/*": ["app/modules/models/*"]
    }
}