TypeScript: Angular 10: Path Mapping shows error in VSCode(Normal/Insiders) when import

After trying everything, I put my previous configuration in tsconfig.json and it finally worked.

{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } }

I know that’s not a solution, but I need to work!

Update in ‘tsconfig.app.json’ “include”:[“src/**/.ts"] look this: “include”: ["src/ **/.d.ts”, “src/ **/*.ts”] this resolve the problem

I finally managed to make this work and @nixerlog’s solution was a part of it. However adding that in then triggered compilation warnings when I built the project.

Something that makes all of this way more confusing is that there are multiple tsconfig.json files in the project and these serve different purposes and can conflict with each other. It’s worth understanding what these files do and how you can simplify them.

The multiple tsconfig files in a project

The main tsconfig file that matters is tsconfig.app.json. This is what the compiler looks for to figure out how to compile the project. However, editors (like VSCode) allow for futher tweaks to be made to optimise your editing environment. These live in tsconfig.json (as opposed to tsconfig.app.json). tsconfig.json can either reference or alternatively, extend tsconfig.app.json - i.e. it builds on it.

If you’re blundering through these files this can all get pretty confusing as putting settings like baseUrl in tsconfig.json won’t actually translate those settings to the compliation of your app. Or worse you might not realise this and have conflicting settings in each file which is even more confusing.

Not only this but contemporary versions of Angular also then add in tsconfig.base.json which is designed for when you have multiple projects within the project. If you don’t need it though it only muddies the waters even more.

How I simplified and solved this

To restate what I mentioned at the start, @nixerlog’s solution was the one that worked for me i.e. make sure that there are both types of files included:

# tsconfig.app.json
{
  "compileOnSave": false,
  ...
  "angularCompilerOptions": {
    ...
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",   <- this line fixed things in VSCode but also added compliation warnings
  ],
}

However, as I said, doing that then fired of compilation errors as files were being included that the compiler didn’t feel should be included. VSCode needed the files included but the compiler didn’t. So I included the extra files in tsconfig.json (which VS Code sees) but not in tsconfig.app.json (which the compiler sees). I alos deleted tsconfig.base.json and removed any references to it because it was adding a further, unnecessary layer of complication.

How the projects started (confusing)

#tsconfig.base.json (a shared config file across all other config files)
{
  "compilerOptions": {
    ...
  },
  "angularCompilerOptions": {
    ...
  }
}

#tsconfig.app.json  (the file that compilation references)
{
  "extends": "./tsconfig.base.json",
  
  ...

  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
  ],
}

#tsconfig.json (i.e the file that VSCode references)
{
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ],
  "compilerOptions": {
    ...
  },

  ...
}

How the project ended

tsconfig.base.json - I deleted this

# tsconfig.app.json (i.e the core config file)
// ... (contains all core tsconfig settings)
{
  ...
  "include": [
    "src/**/*.d.ts",
  ],
}

# tsconfig.json

// This config file ONLY contains stuff for VSCode - i.e. the extra 
// file inclusions 
{
  "extends": "./tsconfig.app.json", <- VSCode inherits the project's settings and adds a couple of its own
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
  ]
}

At the end of all of this there weren’t any compliation warnings and VSCode was working again. From hereon in, I will only add settings to tsconfig.app.json unless for some reason they are particular to VSCode.

Update in ‘tsconfig.app.json’ “include”:[“src/**/.ts"] look this: “include”: ["src/ **/.d.ts”, “src/ **/*.ts”] this resolve the problem

This solved the problem for me! Thanks

After trying everything, I put my previous configuration in tsconfig.json and it finally worked.

{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } }

I know that’s not a solution, but I need to work!

First of all THANK YOU!!! This actually fixed my problem.

It all started when I merged a branch into my master.

After investigating my issue I have to say it was

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "cypress",
      "jquery",
      "node"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "include": [
    "./ssw-electron/main.ts" // <-------- Here is the problem!
  ]
}

removing the include did the trick.

can anyone try explain it please for me and for others who might encounter this ? THANKS!