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

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!

 

4

Hello!

 

please could you share your project package.json?

0

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

The project package.json would be helpful.

0

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

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

3

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

1

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

0

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

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

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

0

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

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

0

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

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

 

I am working in a Nx Standalone Angular Application.

 

Thank you all!

0

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

请先登录再写评论。