using path on tsconfig.json doesn't resolve using angular

Question

In order to avoid relative path when I import file, I try to configure angular to understand path.

So far, it's not working at all, my code :

//tsconfig.app.json
"compilerOptions":{
    //lot of things . If it matter moduleResultion is set to node
    "baseUrl": ".",
    "paths": {
        "@modules": ["app/modules/"]
        ...
    },
}



//in a component: 
import { X } from '@modules/Y/component/index'

when running ng serve , the console output an error about : : Cannot find module '@modules/Y/component/index'.

This is definitly working with relative path like import { X } from ../../../modules/Y/component/index

So, I expect my tsconfig.app.json or tsconfig.json ( or maybe both) are wrong, however, I can't find any good tutorial about how to do it correctly for an angular app.

Currently using angular 4 with basic associate tools (typescript 2.3.3, angular-cli 1.0.6 and provide webpack)

Can you point out the problem to me, or give me a good doc/tuto that resolve this issue with angular please ? All the answer I have seen so far on SO or github issue didn't work at all.

NOTE : The architecture looks like this

project
   |
   -tsconfig.json //had try things on this one too but does nothing.
   -src/
     |
     -tsconfig.app.json
     -app/
       |
       -modules
       -othersFolder

How did you set your project up? ng new normally sets things up ok and you're good to go.... — JGFMK
– JGFMK, Commented Jul 5, 2017 at 15:41
If you're using something like VSCode, if you right click on the class in the import statement you can navigate into the source with Goto Definition. And often time editors do something like put squiggly line under the path if you've got your relative paths incorrect. I'd be checking that then. — JGFMK
– JGFMK, Commented Jul 5, 2017 at 15:55
I'd also be checking you've setup app-modules.ts correctly. angular.io/guide/ngmodule — JGFMK
– JGFMK, Commented Jul 5, 2017 at 15:58
I'm on ST. the goto is working fine, Still not working in the console so must be something else. — ssbb
– ssbb, Commented Jul 5, 2017 at 15:59

yurzui · Accepted Answer · 2017-07-10 12:21:36Z

8

+50

Your code should work with

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

Read more about module resolution in typescript here

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

answered Jul 10, 2017 at 12:21

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ssbb Over a year ago

can't give bounty until 19h.

Frank N Over a year ago

The difference (to the first code sample in the question) is to use /* after the module name? ("paths" is still a child of compiler options?)

Collectives™ on Stack Overflow

using path on tsconfig.json doesn't resolve using angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related