search

webhintio / hint

💡 A hinting engine for the web
https://webhint.io/
Apache License 2.0
3.62k stars 670 forks source link

[Bug] Not able to run ng serve along with npm run hint as one command #2145

Closed MiHawkStackOverFlow closed 5 years ago

MiHawkStackOverFlow commented 5 years ago

I am working on an Angular7 project and trying to integrate webhint axe for ADA (American Disability Act) / Accessibility. I have encountered 3 problems:-

  1. When an angular application with multiple components is run and webhint is run, the html or json formatters show errors but line numbers are column -1 and row -1. So how to find the exact line number for the issue. I think issue for this is raised here

https://github.com/webhintio/hint/issues/1282

  1. How does webhint traverse the code using routes or urls so I can better understand it ?

  2. How to run development server ng serve with npm run hint http://localhost:4200 https://webhint.io/docs/user-guide/development-flow-integration/local-server/

npm run all and concurrency don't work for me. ng serve only keeps running.

https://stackoverflow.com/questions/55348778/using-webhint-with-angular7

molant commented 5 years ago

When an angular application with multiple components is run and webhint is run, the html or json formatters show errors but line numbers are column -1 and row -1.

Most likely this is because the html of the page is generated on the client side so the line/col don't make a lot of sense as it is generated dynamically. If you tell the browser to so the pages code you only obtain the initial html, and if you go to the elements panel in the devtools line and column don't have sense there.

The errors should have the html of the element with the error and that should hopefully help you identify the template with the issue.

That said, we have plans to improve this experience but need to finish a few things first.

How does webhint traverse the code using routes or urls so I can better understand it ?

When using Chrome or jsdom we wait until the page is loaded and then analyze all the html while keeping track of all the network requests. In the case of the local we analyze all the files in the folder passed as a parameter.

npm run all and concurrency don't work for me. ng serve only keeps running.

Do you have the code somewhere so we can take a look? Enabling the concurrency should launch all tasks simultaneously. Maybe it's a question of adding a delay in webhint or something similar.

Thanks!

molant commented 5 years ago

I pasted the same answer on stackoverflow and has been accepted so closing this issue. @MiHawkStackOverflow feel free to open a new issue if you have any problems or questions.

Thanks!