Angular templates in WebStorm 2020.3 show Unresolved pipes and variables after recent updates

Viewed 958

We recently upgraded to Angular 12 and "typescript": "4.2.4". I use WebStorm 2020.3.

My template files suddenly fail to recognize pipes such as date or async and public component properties (that were previously recognized and I'm not the only member of my team impacted this way). But, the app compiles without issues.

This is my first time asking a question here. Any help is greatly appreciated.

package.json dependencies:

...
"dependencies": {
    "@angular/animations": "12.0.5",
    "@angular/common": "12.0.5",
    "@angular/compiler": "12.0.5",
    "@angular/core": "12.0.5",
    "@angular/forms": "12.0.5",
    "@angular/platform-browser": "12.0.5",
    "@angular/platform-browser-dynamic": "12.0.5",
    "@angular/router": "12.0.5",
    "@angular/upgrade": "12.0.5",
    "@cnvr/alerts": "2.5.0",
    "@cnvr/common": "0.6.0",
    "@cnvr/cuik": "4.26.0",
    "@cnvr/global-search": "4.2.0",
    "@iamadamjowett/angular-click-outside": "2.10.1",
    "@ngrx/effects": "10.0.0",
    "@ngrx/entity": "10.0.0",
    "@ngrx/store": "10.0.0",
    "@ngrx/store-devtools": "10.0.0",
    "ajv": "6.12.5",
    "ajv-keywords": "3.5.2",
    "core-js": "2.4.1",
    "cypress-localstorage-commands": "1.2.4",
    "cypress-plugin-tab": "1.0.5",
    "cypress-real-events": "1.3.0",
    "cypress-xpath": "1.6.1",
    "d3": "5.8.0",
    "d3-format": "3.0.1",
    "deep-diff": "1.0.2",
    "deep-equal": "1.0.1",
    "guid-typescript": "1.0.9",
    "istanbul": "0.4.5",
    "istanbul-instrumenter-loader": "3.0.1",
    "jquery": "2.2.4",
    "karma-junit-reporter": "2.0.1",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-spec-reporter": "0.0.32",
    "latest": "0.2.0",
    "lodash": "4.17.21",
    "luxon": "1.26.0",
    "moment": "2.29.1",
    "moment-timezone": "0.5.12",
    "node-sass-asset-functions": "0.1.0",
    "npm": "6.14.11",
    "pako": "1.0.11",
    "pluralize": "7.0.0",
    "prettier": "1.18.2",
    "qrcode": "1.4.4",
    "rxjs": "6.6.3",
    "rxjs-tslint": "0.1.8",
    "source-map-explorer": "1.8.0",
    "ts-deepcopy": "0.1.4",
    "tslib": "2.0.0",
    "web-animations-js": "2.3.2",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "12.0.4",
    "@angular-eslint/builder": "12.1.0",
    "@angular-eslint/eslint-plugin": "12.1.0",
    "@angular-eslint/eslint-plugin-template": "12.1.0",
    "@angular-eslint/schematics": "12.1.0",
    "@angular-eslint/template-parser": "12.1.0",
    "@angular/cli": "12.0.4",
    "@angular/compiler-cli": "12.0.5",
    "@angular/language-service": "12.0.5",
    "@cypress/skip-test": "2.6.0",
    "@types/d3": "5.7.2",
    "@types/jasmine": "3.6.0",
    "@types/jasminewd2": "2.0.6",
    "@types/node": "12.12.31",
    "@typescript-eslint/eslint-plugin": "4.23.0",
    "@typescript-eslint/parser": "4.23.0",
    "body-parser": "1.19.0",
    "browser-sync": "2.27.1",
    "chai": "3.5.0",
    "chai-as-promised": "5.3.0",
    "chalk": "2.4.2",
    "cypress": "7.0.0",
    "cypress-multi-reporters": "1.5.0",
    "dateformat": "1.0.12",
    "debug": "4.1.1",
    "del": "1.2.1",
    "eslint": "7.26.0",
    "eslint-plugin-import": "2.23.4",
    "eslint-plugin-jsdoc": "35.4.0",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "express": "4.17.1",
    "fs-extra": "10.0.0",
    "glob": "7.1.5",
    "install": "0.4.4",
    "intl": "1.2.5",
    "jasmine-core": "3.6.0",
    "jasmine-spec-reporter": "5.0.0",
    "jshint-stylish": "2.2.1",
    "junit-report-merger": "2.2.2",
    "karma": "6.3.4",
    "karma-chai": "0.1.0",
    "karma-chai-sinon": "0.1.5",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage": "2.0.3",
    "karma-coverage-istanbul-reporter": "3.0.2",
    "karma-growl-reporter": "0.1.1",
    "karma-intl-shim": "1.0.3",
    "karma-jasmine": "4.0.0",
    "karma-jasmine-html-reporter": "1.5.0",
    "karma-mocha": "0.2.2",
    "karma-parallel": "0.3.1",
    "karma-sinon": "1.0.5",
    "method-override": "2.3.10",
    "minimist": "1.2.5",
    "mocha": "2.5.3",
    "mocha-junit-reporter": "2.0.0",
    "morgan": "1.9.1",
    "node-fetch": "2.6.1",
    "node-notifier": "4.6.1",
    "node-sass": "4.14.1",
    "plato": "1.7.0",
    "protractor": "7.0.0",
    "q": "1.4.1",
    "run-sequence": "1.2.2",
    "rxjs-marbles": "6.0.1",
    "serve-favicon": "2.5.0",
    "sinon": "1.15.4",
    "sinon-chai": "2.14.0",
    "ts-node": "7.0.1",
    "typescript": "4.2.4",
    "wiredep": "2.2.2",
    "yargs": "13.1.0"
  }
3 Answers

I was able to resolve the issue by running rm -rf node_modules && npm i on my project file in the terminal.

enter image description here

I had this problem too, but it was resolved with this setup

Updating to webstorm 2021.1.3 did resolve this for me

Related