Angular tags not recognised in Angular project with Storybook in 2023.3.3 or 2024.1 EAP

Avatar
W Hollebrandse
Created

Hi!

I'm encountering an issue in WebStorm where Angular tags are no longer recognized. It could be due to a configuration change, but I'm unable to identify the specific alteration responsible for this sudden occurrence.

It's worth noting that all TypeScript files are in order, and there are no reported issues with them. However, the problem extends to HTML tags related to Angular components, including standard tags such as <ng-content> and <ng-container>, as well as custom components like <app-my-component> and components from the library <my-lib-my-component>.

The error message received is: "Unknown html tag app-my-component."

I've attempted several solutions found online and in this forum, including:

  • Removing the exclusion of the node_modules folder.
  • Deleting the .idea folder and restarting.
  • Temporarily disabling all plugins, with subsequent re-enabling of the Angular plugin alone.
  • Upgrading WebStorm to the latest version (2024).
  • Invalidating caches and restarting the system.

I've also reviewed a related forum post [https://intellij-support.jetbrains.com/hc/en-us/community/posts/14691959710610-Unknown-html-tag-div-in-PHPStorm-2023-2-3], but unfortunately, it didn't provide a solution.

Despite these efforts, the issue persists. It feels very frustrating that the basic functionality I need from WebStorm is not working. I hope there is  a solution!

Thanks in advance!

 

Votes

4

Share

15 comments
Avatar
Elena Pogorelova
Created

Hello!

 

please could you share your project package.json?

0
Avatar
Erwin Bergervoet
Created

I am experiencing a similar problem in a hybrid Angular/Angular JS project, also since 2023.3.3. Only the components that have the same selector in Angular JS are recognized in HTML templates, but they should actually refer to the Angular ones in that context.

2
Avatar
Elena Pogorelova
Created

The project package.json would be helpful.

0
Avatar
Erwin Bergervoet
Created

Just found out the Angular JS components are detected because of the @ngdoc comments we have in those. 

I can't just share the whole package.json, but these are the versions of Angular related packages we use.

"dependencies": {
    "@angular/cdk": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/upgrade": "^17.0.0",
    ...
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@ngxs/storage-plugin": "^3.8.1",
    "@ngxs/store": "^3.8.0",
	...
	"angular": "1.8.3",
    "angular-animate": "^1.7.9",
    "angular-aria": "1.8.3",
    "angular-cookies": "1.8.3",
    "angular-dynamic-locale": "0.1.37",
    "angular-messages": "1.8.3",
    "angular-sanitize": "1.8.3",
    "angular-touch": "1.8.3",
    "angular-ui-sortable": "0.19.0",
    "angular-ui-validate": "1.2.3",
},
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.0",
    "@angular/animations": "^17.0.0",
    "@angular/cli": "^17.0.0",
    "@angular/compiler-cli": "^17.0.0",
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.21.4",
    "@compodoc/compodoc": "^1.1.23",
    "@ngtools/webpack": "^17.0.0",
    "@ngxs/devtools-plugin": "^3.8.0",
    ...
    "angular-i18n": "1.8.3",
    "angular-translate-extract": "^1.0.0",
    ...
    "html-loader": "^4.1.0",
    "html-webpack-plugin": "^5.5.0",
    ...
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.15.1",
    "webpack-merge": "^5.8.0"
}
0
Avatar
Elena Pogorelova
Created

Do you have any other frameworks (react, vue, etc) listed in your dependencies? They can cause problems recognizing Angular templates.

3
Avatar
Erwin Bergervoet
Created

Storybook added a react dependency with the latest version. Moving these to the devDependencies fixed it, thanks!

1
Avatar
Elena Pogorelova
Created

Thanks for clearing it up! Please follow WEB-65265 for updates.

0
Avatar
W Hollebrandse
Created

Hi, thanks for all the reactions,

I can confirm that the error is related to the react dependency being included. Moving it to the devDependencies worked! Thanks 🥳!

For future reference: here is my package.json

 

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "nx run my-project:serve --configuration=nl",
    "storybook": "nx run my-lib:storybook",
    "build": "nx build",
    "watch": "nx build --watch --configuration development",
    "test": "nx test",
    "i18n:extract": "nx extract-i18n",
    "lint": "nx lint",
    "prettier-check": "prettier --check .",
    "prettier": "prettier --write .",
    "prepare": "husky install",
    "artifactregistry-login": "npx google-artifactregistry-auth --repo-config=./.npmrc --credential-config=$HOME/.npmrc"
  },
  "private": true,
  "dependencies": {
    "@angular-builders/jest": "^16.0.1",
    "@angular/animations": "^16.1.2",
    "@angular/cdk": "^16.2.3",
    "@angular/common": "^16.1.2",
    "@angular/compiler": "^16.1.2",
    "@angular/core": "^16.1.2",
    "@angular/forms": "^16.1.2",
    "@angular/material": "^16.1.2",
    "@angular/platform-browser": "^16.1.2",
    "@angular/platform-browser-dynamic": "^16.1.2",
    "@angular/router": "^16.1.2",
    "@taiga-ui/core": "^3.44.1",
    "@taiga-ui/icons": "^3.45.0",
    "@types/reflect-metadata": "^0.1.0",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.0",
    "jest-generic-mock-class": "^1.0.0",
    "keycloak-angular": "^14.0.0",
    "keycloak-js": "^21.1.1",
    "ngx-mxstore": "^16.0.2",
    "ngx-observable-lifecycle": "^2.2.1",
    "open-props": "^1.6.5",
    "ramda": "^0.29.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~16.2.0",
    "@angular-devkit/core": "~16.2.0",
    "@angular-devkit/schematics": "~16.2.0",
    "@angular-eslint/eslint-plugin": "~16.0.0",
    "@angular-eslint/eslint-plugin-template": "~16.0.0",
    "@angular-eslint/template-parser": "~16.0.0",
    "@angular/cli": "~16.2.0",
    "@angular/compiler-cli": "~16.2.0",
    "@angular/language-service": "~16.2.0",
    "@angular/localize": "^16.2.0",
    "@nx/angular": "~16.2.0",
    "@nx/eslint-plugin": "16.10.0",
    "@nx/jest": "16.10.0",
    "@nx/js": "16.10.0",
    "@nx/storybook": "^16.10.0",
    "@nx/workspace": "16.10.0",
    "@schematics/angular": "~16.2.0",
    "@storybook/addon-essentials": "7.0.27",
    "@storybook/angular": "7.0.27",
    "@storybook/core-common": "^7.0.24",
    "@storybook/core-server": "7.0.27",
    "@types/jest": "^29.5.8",
    "@types/node": "^20.4.2",
    "@types/ramda": "^0.29.5",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "eslint": "~8.46.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "husky": "^8.0.0",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-preset-angular": "~13.1.0",
    "jsonc-eslint-parser": "^2.1.0",
    "lint-staged": "^15.1.0",
    "ng-extract-i18n-merge": "^2.7.0",
    "nx": "16.10.0",
    "prettier": "2.8.8",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.1.5"
  }
}
1
Avatar
Gruettner
Created

I encountered the same issue in my Angular project using nx and Storybook, which has been in place for several months. The problem emerged today without any npm install or update being performed. Moving react & react-dom to devDependencies resolved it. I noticed this issue in both IntelliJ Ultimate and WebStorm.

1
Avatar
Iulian Mids
Created

moving react to devDeps won't affect the production build?

0
Avatar
Chrishawn
Created

This is still all kinds of broken with an Angular Storybook project.  Even with devDependencies. Invalidate caches, and Repair IDE do not work either. This worked perfectly before 2023.3.3, this happened once a while back in a previous upgrade as well and we had to add some directory in settings I remember. Not only does it break angular components it breaks all components made with angular as well. Its hard to ignore to because it also triggers all the built in Problems and Analysis error and warnings too.

0
Avatar
Chrishawn
Created

does seem to be fixed/handled in `WebStorm 2024.1 EAP Build #WS-241.11761.28, built on February 8, 2024`
 

0
Avatar
Daniel
Created

I have a nx project.

Almost everything is Angular, but I have an internal documentation in Docusaurus (React) 
Moving react & react-dom to devDependencies fixed for me

Thank you so much :) 

 

1
Avatar
Alfredo Perez Q
Created

Moving react & react-dom to devDependencies fixed for me as well. 

 

I am working in a Nx Standalone Angular Application.

 

Thank you all!

0
Avatar
Piotr Gorny
Created

Two days lost trying to find, why IntelliJ suddently stopped recognizing my Angular tags. I do use Storybook and I did have react and react-dom in dependencies - moving them to devDependencies fixed all. Thanks you so much!!!

0

Please sign in to leave a comment.