-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
tsconfig paths and module resolution errors in VS Code #8138
Comments
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 |
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. https://github.com/Veabers/tsconfig-paths-repro-app |
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. |
Hi @sandangel , 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 here is my config: "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
}
}
|
@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: |
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 |
Having problems as well. It does compile fine, but vscode cannot find it. |
@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. |
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
but in
I have 3 tsconfig files:
and
When I am in This seems to be more of a VSCode issue than an angular issue so I will post this as an issue in VSCode. |
Has there been any progress on this? Probably a VS Code issue rather than an Angular one. I can still replicate with the latest versions of each though. New cli project, trying to alias my src/app/ imports so they can be absolute (e.g. I want to be able to import I've tried adding |
I had the same issue but it seams it was resolved with using a more "explicit" relative path in Before:
After:
|
@johankvint, your solution of using Something to watch out for if you use barrel files there is different setup. Let's suppose you have a guards folder in your app and your usual import is
If you have app/guards/index.ts and a LoginGuard component you should now have the following options to import.
or
|
@DerekSchmid Well yes if you only use
|
@johankvint, do you mean that can work for barrel files? I receive a Now, it does work if I explicitly import the |
@DerekSchmid Yes, my mistake. I just checked my project and I do not have any |
This works for me: 🔧 Move (or repeat) |
The basic problem here is that by default when the tools in TypeScript toolset try to determine which compiler configuration to use with any given file, they look for a file named The default can be overridden. Presumably, that's what angular-cli does when it invokes the TypeScript compiler or However, this falls apart when it comes to getting editors to automatically recognize those files. TypeScript editors that provide complete support for TypeScript, like VSCode, usually launch a An issue with the TypeScript project was opened here but it does not look like any modifications will be made to the TS toolset to handle angular-cli's unusual naming convention. I've not found a newer issue that indicates otherwise. |
I had to set {
"compilerOptions": {
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
} |
Neither this
Nor this is a valid solution for the problem for the current "monorepo"-approach. If we have multiple projects in one repo, the determination for a "project" in the context of angular is done by tsconfig files. Now imagine that you have 3 projects A & B & C, while B & C being a library project. As a good developer you want a clean separation between your concerns in such architecture / structure:
You are going to solve this by adding the mapping into the tsconfig of the Project A and not in the root tsconfig of the repo, otherwise you would create a relation/mapping what you actually don't want.. We too suffer from this bug. At first I was thinking this is a bug in Webstorm, but after discovering this thread things got interesting. |
Yeah we've the same problems, we've added two angular projects in the same repo and we've two different tsconfig files, because different apps require different alias. |
Sounds valid. But as far as I understand the reason for having separate tsconfig files is due to the different compilation contexts, right? So why keeping those files at all? You could wrap the relevant settings into angular.json and just keep one tsconfig for each project for the IDE's. You could even extend the cli to have a section "typescriptOptions" which then could have multiple "targets" or "configs" in the same manner like the other build/serve configs:
This could work, don't? At least I'm not aware of any restrictions / blocker for not doing this. |
I'm not a big fan of adding the TS options in the |
I don't get it. You can also change the In my example it was intended to leave at least one |
I often run |
Okay, but the tool devs have to provide such functionality, nothing out of the box. Can you tell Vscode to use a particular tsconfig for its autocomplete? Or can you configure the angular language service to use another tsconfig? Even if your IDE can handle other naming patterns, how does it know which one to use for a specific folder, if there are multiple tsconfigs. The one for unit tests also include the origin files... The feedback I'm receiving pretty often is that it's not really clear which of those files is now being used from the IDE while you are developing / doing other tasks. |
Keep it simple, if the vscode found two tsconfig in immediate parent
folder, just ask which one to use. And save it in the .vs folder.
Later if user want to change the tsconfig, they should be able to do so by
some setting, better if it be a right click menu on folder viewer
…On Sun, Feb 3, 2019, 19:17 kqadem ***@***.*** wrote:
Okay, but the tool devs have to provide such functionality, nothing out of
the box. Can you tell Vscode to use a particular tsconfig for its
autocomplete? Or can you configure the angular Lange service to use another
tsconfig? Even if your IDE can handle other naming patterns, how does it
know which one to use for a specific folder, if there are multiple
tsconfigs. The one for unit tests also include the origin files...
The feedback I'm receiving pretty often is that it's not really clear
which of those files is now being used from the IDE while you are
developing / doing other tasks.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#8138 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AIk0J2eq-cKFKwnky2IkG1pWih3TbTZWks5vJsVNgaJpZM4QBesR>
.
|
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: Then make a
I'm actually in a React codebase and don't even use typescript in it, yet setting the |
There are many folders in my VSCode workspace inspector, and VSCode may only use the first folder's So one project one workspace and place the configure folder at first place. |
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 noteI had to remove 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 |
microsoft/TypeScript#37239 might help with this. It's described in https://devblogs.microsoft.com/typescript/announcing-typescript-3-9-beta/ as follows:
|
Discussed this in a meeting earlier and |
Being tracked internal TOOL-1368 |
In version 3.9, TypeScript introduced the concept of "Solutions Style" tsconfig to improve developer experience. More info: https://devblogs.microsoft.com/typescript/announcing-typescript-3-9-rc/#solution-style-tsconfig Closes #17493 and closes #8138
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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.
The text was updated successfully, but these errors were encountered: