tsconfig paths and module resolution errors in VS Code

[SpiraMira]

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.

[filipesilva]

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]

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

[sandangel]

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.

[mehs2690]

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]

@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
  }
}

[mehs2690]

@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]

can you try with Typescript Hero plugin?
here is my screenshot

[mehs2690]

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]

Having problems as well. It does compile fine, but vscode cannot find it.

[mehs2690]

@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]

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.