Nx: NX 10 - Missing "solution style" tsconfig.json makes vscode warn about false errors

[vmcbaptista]

Current Behavior

Created workspace contains a tsconfig.base.json in the root directory but not a tsconfig.json. This causes vs code to show false errors, like, for example, the misconfiguration of support for decorators.

Expected Behavior

Root directory should contain a tsconfig.json, using the new "solution style" like described here:
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#support-for-solution-style-tsconfigjson-files

Note that in Angular 10 this was one of the changes Angular team decided to implement.

Steps to Reproduce

1. Create new workspace (I used npx) and selected angular as starting template
2. Open the workspace in VS code
3. Check that the generated workspace does not contain any tsconfig.json
4. Open a class containing a decorator, for example an Angular component
5. See that there you'll start getting false errors in the editor.

Environment

@nrwl/angular : 10.0.6
@nrwl/cli : 10.0.6
@nrwl/cypress : 10.0.6
@nrwl/eslint-plugin-nx : Not Found
@nrwl/express : Not Found
@nrwl/jest : 10.0.6
@nrwl/linter : Not Found
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 10.0.6
@nrwl/web : Not Found
@nrwl/workspace : 10.0.6
typescript : 3.9.7

[drakenfly]

I'm having the same issue too. Compilation works like a charm, but VSCode is not able to obtain correct typescript information.

Errors are:

• Cannot find module '@cwa/api' or its corresponding type declarations. ts(2307)
• Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)

The same errors keep happening for me also for newly generated nx-workspaces (v10.0.6).

The proposed solution in https://github.com/nrwl/nx/issues/3380#issuecomment-662941913 didn't work either.

[drakenfly]

I'm also quite confused about the solution style tsconfig.json inside the libs folders:

libs/<some lib folder>/tsconfig.json:

{
  "extends": "../../tsconfig.base.json",
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

libs/<some lib folder>/tsconfig.lib.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": ["jest", "node"]
  },
  "files": ["src/test-setup.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}

Is the tsconfig.lib|spec.json really meant to extend a solution style tsconfig? I guess it would be more correct to directly extend ../../tsconfig.base.json inside tsconfig.lib|spec.json, but I'm not sure. I was experimenting a lot to get my workspace code completion running again and re-wrote a lot of tsconfig files for testing purposes, but none of my tries really worked out.

The only essence I took out of all available documentation is, that seemingly a developer needs to build the workspace using tsc -b to get code completion again when using a solution style tsconfig.json, as it depends on the *.d.ts files that shall be generated. This would also mean to change some settings in tsconfig.base.json as already mentioned in https://github.com/nrwl/nx/issues/3413.

[FrozenPandaz]

@vmcbaptista Please make sure your VS Code is using Typescript 3.9. That should fix the error and become the default eventually.

@drakenfly

Yes, it is intentional that the lib/lib-a/tsconfig.lib.json => lib/lib-a/tsconfig.json => tsconfig.base.json.

Is the 1st error perhaps related to this? https://github.com/nrwl/nx/issues/3423#issuecomment-667340061. e.g. Is that component a part of an Angular app?
To fix the 2nd error make sure that experimentalDecorators is true. Usually, this is in the root tsconfig.base.json.

[vmcbaptista]

@FrozenPandaz After forcing VS Code to use Typescript 3.9.7 (from node_modules).
The errors are gone in the apps, but not in the libs.

It seesm like that for some reason, VSCode cannot find tsconfig.json when opening a module of a lib:

And in the case of components and directives, it selects the spec.json

[drakenfly]

@FrozenPandaz But this would mean, that VSCode would not open a simple "solution style" tsconfig.json for an app or library, which simply references the libraries tsconfig.*.json files. They would inherit all of the other settings? I didn't think that this is intentional, what is the rationale behind this?

[charsleysa]

@FrozenPandaz I also had this issue.

I noticed that for existing libraries the migrations removed "include": ["**/*.ts"] from the tsconfig.lib.json file, but for new libraries this line still exists.

I re-added "include": ["**/*.ts"] to the tsconfig.lib.json file for my existing libraries and this seems to have fixed the issue for me.

Also noticed "exclude": ["src/test.ts", "**/*.spec.ts"], seems to be wrong, the test.ts file is actually called test-setup.ts. Again this is fine for new libraries but seems to be broken for existing libraries after migration.

[FrozenPandaz]

@vmcbaptista

What does the tsconfig.json and tsconfig.lib.json look like?

@drakenfly

But this would mean, that VSCode would not open a simple "solution style" tsconfig.json for an app or library

VSCode will look at the solution style tsconfig and go through the references to find a tsconfig that includes the file open in VSCode. Separately, those tsconfig.*.json files need a lot of the settings from the base tsconfig.base.json so it is intentional that they extend. The proj/tsconfig.json is still a good place to define settings that should be shared throughout the project (runtime and tests, but not for other projects) such as "jsx": "react" etc.

@charsleysa

I noticed that for existing libraries the migrations removed "include": ["**/*.ts"] from the tsconfig.lib.json file

This is not expected. Can you please open a separate issue with a repro case?

[vmcbaptista]

@FrozenPandaz
tsconfig.json:

{
  "extends": "../../tsconfig.base.json",
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

tsconfig.lib.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "target": "es2015",
    "declaration": true,
    "inlineSources": true,
    "types": [],
    "lib": ["dom", "es2018"]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
  "exclude": ["src/test-setup.ts", "**/*.spec.ts"]
}

[ahnpnl]

Angular team decided to revert solution style config https://github.com/angular/angular-cli/commit/8fb52596a051357d7a90620032e9d253f1a5d455

[FrozenPandaz]

@vmcbaptista

Somehow, your tsconfig.lib.json does not have any include or files that it points to. I recommend setting include to [**/*.ts]. That should solve your issue. I'm not sure how you arrived at this state though.. if you could look through your commit history and see if it's anything that Nx is doing wrong, please let us know in a new issue.

[x87]

Migrating to Nx 10.1.0 still offers solution style config from Angular 10.0. Is there a way for Nx to support Angular 10.1 that has been released already?

[fasidOnGit]

Yes, Angular 10.1.0 reverted the solution style tsconfig. When I run nx lint it runs for a single app leaving other apps and libraries.

> nx run store:lint 
Linting "store"...
All files pass linting.

_Note: store is the name of the app_

[FrozenPandaz]

Nx 10.2 should be able to support that layout without issues. If you have issues with using non-solution style tsconfigs, please create a separate issue.

I also believe that vscode by default uses Typescript 3.9 and handles not having a tsconfig.json at the root so I would like to close this issue. I believe @vmcbaptista's issue is a misconfiguration of the tsconfig files and am curious about what caused the misconfiguration.

[x87]

this ticket has more in-depth explanation of the OP issue
https://github.com/angular/angular-cli/issues/18040

[vmcbaptista]

Hi @FrozenPandaz. I don't have the workspace I used when opening this issue anymore. But I'm pretty much sure that this was somehow generated by nx cli, when creating the library. Although, I tried now with a new workspace created using Nx 10.2 and it looks fine. so I'm closing this issue.