Sudden errors on Visual Studio Code Imports

I re-booted my Mac today and from that point onwards my Ionic project has been full of red squiggly error lines on any of my absolute import paths. So previously an import such as:

import { myService } from "src/app/core/services/myService.service";

is now highlighted as an error.

Does anyone have any idea what might cause that or how I might fix it?

My tsconfig.json has this in it:

  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  "include": ["src/test.ts", "src/**/*.prod.ts", "src/**/*.staging.ts"],
  "exclude": ["**/*.spec.ts"]

I’ve googled all day about this and tried a few things but nothing has worked - has anyone else had this issue?

I’ve never used VSCode, but when WebStorm’s syntax highlighting does something similar, hovering one’s mouse over the offending bit causes an error message to appear. If you can’t get that to happen, does attempting to build the project from a CLI generate anything useful?

Hi there. The message is just “Cannot find module” and builds work fine - but all my components are now riddled with these red import errors.

If builds work fine, I think that eliminates the possibility of it being a file permission problem. If it’s just happening in the IDE, then I would look at IDE-specific stuff. For example, JetBrains puts an .idea folder at the top level of the project that contains all IDE-specific information. Assuming VSCode does something similar, you could try closing VSCode, renaming that directory (I typically just add a “-broken” suffix; if it ends up not helping, you can easily rename it back and get yourself back to status quo ante), and then restarting VSCode. Or if it has an “invalidate project caches” or something feature, try that.

Thanks - I’ve tried several things today and nothing has worked! I’ll look into some of those things you mentioned

Renaming the folder made no difference. I just opened up another project in VS Code and that is fine - no import errors at all. That’s an older project with an older version of Typescript - maybe that’s something to do with it. This only happened after my Mac re-boot this morning though - first re-boot for a few weeks.

Just installed WebStorm (30 day trial!) and no errors appear. No idea what’s up with VS Code. Maybe I should switch.

1 Like

YMMV, but I’ve been using JetBrains products for over a decade and cannot say enough good things about them. I think they’re especially great for polyglot developers, because you get the same UI with special customization for whatever language you’re working in: C, JavaScript/TypeScript, HTML, Python, Go, SQL, Java, C#, Kotlin, whatever. Android Studio is based off the same codebase as well, so if you’ve any familiarity with it, it should carry over.