AngularJS 1.8.0 and Jquery 3.6.0 compatibility problem

Issue

I have java web project application, using Angular 1.8.0 and JQuery 1.12.2. It's working fine. Despite the fact that Angular 1.8.0 should maintain JQuery 3.6.0, when I update JQuery to 3.6.0 all that's placed after "command-bar" directive is not shown:

...
<div ng-if="home.showGrid" class="container-fluid ms-font-m">
  <command-bar/>
  <!-- the next part is not shown -->
  <div id="homeGrid" ui-grid="home.gridOptions" ui-grid-save-state ui-grid-auto-resize ui-grid-edit ui-grid-selection ui-grid-pinning ui-grid-resize-columns ui-grid-pagination class="grid"></div>
</div>
...

If I place the div with "homeGrid" id before "command-bar" then it's shown.

Also I've tried to create new AngularJs directive with "<div>Hello</div>" only and empty controller, replaced command bar with it and it's not shown also.

If i'm trying to force Angular to use JQlite with ng-jq it's even worse, template is totally crashed and there are third party components that need JQuery in assets folder anyway.

Please advise what could be the solution and what steps I need to do to find the root of the problem?

Solution

Finally found the problem. It seems to me that Angular doesn't correctly recognize the short form of tags. After I changed "<command-bar/>" to "<command-bar></command-bar>" everything worked.

Answered By - Гончаренко Александр