GeezerVison is showing github.com — tsconfig paths and module resolution errors in VS Code · Issue #8138 · angular/angular-cli
tsconfig paths and module resolution errors in VS Code #8138Description
Bug Report or Feature Request (mark with an x)
- [x] bug report -> please search issues before submitting
- [ ] feature request
Versions.
@angular/cli: 1.4.9
node: 7.9.0
os: darwin x64
@angular/animations: 4.4.5
@angular/common: 4.4.5
@angular/compiler: 4.4.5
@angular/core: 4.4.5
@angular/forms: 4.4.5
@angular/http: 4.4.5
@angular/platform-browser: 4.4.5
@angular/platform-browser-dynamic: 4.4.5
@angular/router: 4.4.5
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.5
typescript: 2.3.4
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.
Reacted by Tom Seldon, Jay C., Syed Ali Taqi, Yurii Haideichuk, Omar El Halabi, David Fallah, Pablo Reyes, Alex Rapley, Khaled Triek, Sebastian Langer and 29 more Reacted by Jason Foglia and Vincent Activityfilipesilva commented on Oct 25, 2017 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-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here. ThomasBeavers commented on Nov 18, 2017 sandangel commented on Nov 19, 2017 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 more mehs2690 commented on Jan 13, 2018 Hi @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. sandangel commented on Jan 13, 2018 @mehs2690 can you type environment in editor ( don't add import statement yet ) and then press Ctrl + . 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 accordingly
here 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 more Reacted by Familusi Babatunde, nfourre, Simon Rothert, Asif Rahman, Jonathan Sant, jesusvallez, rip3rs, oskrb22, jbgtmartin, Dariusz Filipiak and 6 more Reacted by Syed Ali Taqi, Rahul Vagadiya, Simon Rothert, Jonathan Sant, jesusvallez, Dariusz Filipiak, Kate Dainovich, Afif Fikani, Vahid Mohammadi, Belal Al Mazlom and 2 more Reacted by Dariusz Filipiak and Etzael Henaro Sánchez mehs2690 commented on Jan 13, 2018 @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:
sandangel commented on Jan 13, 2018 can you try with Typescript Hero plugin?
here is my screenshot
 Reacted by Etzael Henaro Sánchez, Josue Teixeira and Tomasz Morawski Reacted by amiceli, Etzael Henaro Sánchez and Tomasz Morawski mehs2690 commented on Jan 13, 2018 Thank 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. regards fxck commented on Jan 15, 2018 Having problems as well. It does compile fine, but vscode cannot find it. Reacted by zhaowenjian, Terrence and Shankar Regmi mehs2690 commented on Jan 15, 2018 @fxck, Have you already tried installing the Plugin of Typescript Hero? also, it happens to me that you have to reopen the vscode so that the changes take them into account. Roaders commented on Feb 1, 2018 I 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.ts this is fine:
import { AppRoutingModule } from '@app';
import { AppComponent } from '@app';
import { SharedModule } from '@shared';
but in app.component.spec.ts I get the error here:
import { AppComponent } from '@app';
[ts] Cannot find module '@app'.
I have 3 tsconfig files:
tsconfig.json in src:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app"
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
tsconfig.spec.json in src:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
and tsconfig.json in root:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@app": [
"app/"
],
"@ui": [
"app/ui/"
],
"@shared": [
"app/modules/shared/"
]
}
}
}
When I am in app.module.ts and I do > Typescript: Go to project configuration I get taken to src/tsconfig.json. When I am in app.component.spec.ts and do the same I get a message saying Files in not part of a TypeScript project. When I go to configure tsconfig.json I get taken to the tsconfig.json in 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 Doug Reacted by Adebayo Akinlaja and paulbanwart lifenstein commented on Feb 15, 2019 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.json file 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": true in my vscode settings gives me all the intellisense I need with just these two changes! ruojianll commented on Feb 15, 2019 There are many folders in my VSCode workspace inspector, and VSCode may only use the first folder's tsconfig.json. If your tsconfig.json is 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. dagatsoin commented on Feb 18, 2019 As 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*",
]
}smaranh commented on Jan 17, 2020 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 Boo filipesilva commented on Mar 30, 2020 microsoft/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.
dgp1130 commented on Apr 9, 2020 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 Ochoa alan-agius4 commented on Apr 13, 2020 added a commit that references this issue on May 20, 2020This issue will close once commit bede232 is merged into the 'main' branch.bede232 angular-automatic-lock-bot commented on Jun 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. added a commit that references this issue on May 29, 2026This issue will close once commit 56c0084 is merged into the 'master' branch.56c0084
MetadataMetadataDevelopmentNo branches or pull requestsIssue actions
|
