Repository navigation
tsconfig paths and module resolution errors in VS Code #8138
Description
Activity
Can you setup a minimal repro please? You can read here why this is needed. A good way to make a minimal repro is to create a new app via
ng new repro-appand adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.I am not the OP, but here is a sample repo showing a component imported via the path alias displaying the "Cannot find module" error in vscode, but successfully building with npm run build --prod.
vscode seem to only look into nearest tsconfig.json file, while angular read your tsconfig.app.json You should add relative path config to both tsconfig.json and tsconfig.app.json.
Reacted by maiasmith, Fan Li, Jonathan Sant, Joar K. Mauseth, Bruno Brito, Himanshu Satija, Ofirmgr, polypus74, James Scharett, Hervé and 9 moreHi @sandangel ,
I hope you are well, I followed the advice you gave to add the alias settings in both the tsconfig.json and the tsconfig.app.json, but when I'm writing the import statement I get the following:
I know that this is not a priority, but I am worried when it is very possible that my application grows severely in subfolders and reaches a tedious depth of escirbir.
@mehs2690 can you type
environmentin editor ( don't add import statement yet ) and then pressCtrl + .when cursor in environment to see what option vscode suggest? Remember that because tsconfig.json and tsconfig.json has different baseUrl so you have to align path config accordinglyhere is my config:
tsconfig.json"baseUrl": "./", "paths": { "@app/*": ["src/app/*"], "@env/*": ["src/environments/*"], "@views/*": ["src/app/views/*"] }
tsconfig.app.json
{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "module": "es2015", "types": [], "paths": { "@app/*": ["app/*"], "@env/*": ["environments/*"], "@views/*": ["app/views/*"] } }, "exclude": ["test.ts", "**/*.spec.ts"], "angularCompilerOptions": { "annotationsAs": "static fields", "annotateForClosureCompiler": true, "preserveWhitespaces": false, "fullTemplateTypeCheck": true } }Reacted by Familusi Babatunde, nfourre, Simon Rothert, Jonathan Sant, Vijay Sarathy, lululuffy, Nenad, xaun, Yonny Vizcaya, jesusvallez and 23 moreReacted by Familusi Babatunde, nfourre, Simon Rothert, Asif Rahman, Jonathan Sant, jesusvallez, rip3rs, oskrb22, jbgtmartin, Dariusz Filipiak and 6 moreReacted by Syed Ali Taqi, Rahul Vagadiya, Simon Rothert, Jonathan Sant, jesusvallez, Dariusz Filipiak, Kate Dainovich, Afif Fikani, Vahid Mohammadi, Belal Al Mazlom and 2 moreReacted by Dariusz Filipiak and Etzael Henaro Sánchez@sandangel I have configured both the tsconfig.json and the tsconfig.app.json as you suggested, I wrote in the editor environment and got this:
can you try with Typescript Hero plugin?
here is my screenshot
Reacted by Etzael Henaro Sánchez, Josue Teixeira and Tomasz MorawskiReacted by amiceli, Etzael Henaro Sánchez and Tomasz MorawskiThank you very much @sandangel ! with the Plugin of Typescript Hero it already detects the paths and it does not mark error in vscode. I tried compiling (ng build) and there was no error, I tried in prod mode and an error came out (ng build --prod) ERROR in ./src/main.ts
Module not found: Error: Can not resolve './$$_gendir/app/app.module.ngfactory', lastly I tried running (ng build --prod --aot = false) and everything went fine. but for the moment I can continue to develop with the help you gave me. regardsHaving problems as well. It does compile fine, but vscode cannot find it.
Reacted by zhaowenjian, Terrence and Shankar RegmiI am having this issue as well and I am unable to install Typescript Hero as access is restricted from where I work.
For me I only get the issue in test specs.
In
app.module.tsthis is fine:import { AppRoutingModule } from '@app'; import { AppComponent } from '@app'; import { SharedModule } from '@shared';but in
app.component.spec.tsI get the error here:import { AppComponent } from '@app';[ts] Cannot find module '@app'.I have 3 tsconfig files:
tsconfig.jsoninsrc:{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app" }, "exclude": [ "test.ts", "**/*.spec.ts" ] }tsconfig.spec.jsoninsrc:{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/spec", "types": [ "jasmine", "node" ] }, "files": [ "test.ts" ], "include": [ "**/*.spec.ts", "**/*.d.ts" ] }and
tsconfig.jsoninroot:{ "compilerOptions": { "baseUrl": "src", "paths": { "@app": [ "app/" ], "@ui": [ "app/ui/" ], "@shared": [ "app/modules/shared/" ] } } }When I am in
app.module.tsand I do> Typescript: Go to project configurationI get taken tosrc/tsconfig.json. When I am inapp.component.spec.tsand do the same I get a message sayingFiles in not part of a TypeScript project. When I go to configuretsconfig.jsonI get taken to thetsconfig.jsonin the root of the project.This seems to be more of a VSCode issue than an angular issue so I will post this as an issue in VSCode.
Reacted by Marko Kajzer, Reto Ryter, Ryan Voronyak, zhaowenjian, Filip Michalski and DougReacted by Adebayo Akinlaja and paulbanwart37 remaining items
I was having troubles with absolute and relative URLs myself; ended up following instructions at https://hackernoon.com/react-pro-tip-use-absolute-imports-for-better-readability-and-easy-refactoring-2ad5c7f2f957 which completely fixed the issues.
TL;DR:
Make a .env file in project root and add this:
NODE_PATH=src/Then make a
jsonconfig.jsonfile in project root and add this:{ "compilerOptions": { "baseUrl": "src" } }I'm actually in a React codebase and don't even use typescript in it, yet setting the
"javascript.implicitProjectConfig.checkJs": truein my vscode settings gives me all the intellisense I need with just these two changes!There are many folders in my VSCode workspace inspector, and VSCode may only use the first folder's
tsconfig.json. If yourtsconfig.jsonis not in the first folder, drag the folder to the first and try it again, it worked for me.So one project one workspace and place the configure folder at first place.
Reacted by nckingAs there is no clear solution, I will past my working one:
folders: -root -tsconfig.json #the package config --src #the source of my package --demo --tsconfig.json #the storybook config referencing my upper module as "@sproutch/ui"
Important note
I had to remove
"rootDir": "src",from the root package config to make it work.Here are the full files.
Package config
{ "compilerOptions": { "allowSyntheticDefaultImports": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "forceConsistentCasingInFileNames": true, "jsx": "react", "lib": ["es2017", "dom"], "module": "commonjs", "declaration": true, "moduleResolution": "node", "noImplicitReturns": true, "noImplicitThis": true, "noUnusedParameters": true, "outDir": "lib", "preserveConstEnums": true, "skipLibCheck": true, "sourceMap": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "target": "es5", "types": ["node", "react", "react-dom", "react-native"] }, "include": [ "src/**/*" ], "exclude": [ "build", "node_modules", "jest.config.js", "App.js", "babel.config.js", "metro.config.js" ], "compileOnSave": false }Storybook subfolder config
{ "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "baseUrl": "../", "emitDecoratorMetadata": true, "experimentalDecorators": true, "forceConsistentCasingInFileNames": true, "jsx": "react", "lib": ["es2017", "dom"], "module": "commonjs", "moduleResolution": "node", "noImplicitReturns": true, "noImplicitThis": true, "noUnusedLocals": false, "noUnusedParameters": false, "outDir": "lib", "paths": { "@sproutch/ui": ["./src"] }, "preserveConstEnums": true, "skipLibCheck": true, "sourceMap": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "target": "es5", "types": ["node", "react", "react-dom", "react-native"] }, "include": [ "./stories/**/*", ], "exclude": [ "./stories/**/*native*", ] }Here is how I fixed it, turns out it is a problem with VSCode. Sometimes changes to tsconfig are not reflected in the IntelliSense. I closed VSCode and made sure no VSCode process was running. They reopened VSCode and Voila! IntelliSense now detects the
@😩Reacted by Ritesh Kumar, Max and Boomicrosoft/TypeScript#37239 might help with this. It's described in https://devblogs.microsoft.com/typescript/announcing-typescript-3-9-beta/ as follows:
Support for “Solution Style” tsconfig.json Files
...
This file that really does nothing but manage other project files is often called a “solution” in some environments. Here, none of these tsconfig.*.json files get picked up by the server, but we’d really like the language server to understand that the current .ts file probably belonds to one of the mentioned projects in this root tsconfig.json.TypeScript 3.9 adds support to editing scenarios for this configuration. For more details, take a look at the pull request that added this functionality.
Discussed this in a meeting earlier and
tsconfig"solutions" can be a great answer to this problem. We'll do some more investigation to see exactly how this can work and what release we can fit it into.Reacted by José Miguel OchoaBeing tracked internal TOOL-1368
- added a commit that references this issue
on May 20, 2020 This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
- locked and limited conversation to collaborators
on Jun 20, 2020 - added a commit that references this issue
on May 29, 2026
Bug Report or Feature Request (mark with an
x)Versions.
macOS Sierra 10.12.6
VS Code 1.17.2
Repro steps.
My tsconfig path property seems broken.
When I replace my path mapped imports (@shared, @assets etc.) with the equivalent coded relative paths, typescript module resolution seems to work (vs code intellisense is happy)
I have a large angular 2 project and am used to aliasing my asset and shared directories this way.
NOTE: project builds and (seems) to run just fine
This has been reported often, but I can't make sense of the current state of this issue.
This more than annoying as VS Code reports Angular spurious errors on all of my components.
I also suspect this is why I get the infamous Can't read property isSkipSelf of null when I open my templates (html) in VS Code.
I was running 1.4.2 and just tried ~1.4.2, which resolves to 1.4.9 in my package.json, to no avail.
Will 1.5.x fix this?
How can I help debug this without providing a copy of my app?
Thanks in advance. Regards.
The log given by the failure.
Desired functionality.
Mention any other details that might be useful.