Angular中使用jQuery的组件路由后无法渲染问题求助

• 刚接触渲染相关知识，对jQuery不熟悉，Angular应用出现异常：使用routerLink路由跳转组件，或通过异步CanActivateChild守卫加载组件时，依赖jQuery的滑块组件会消失（容器被设置为display: none），推测是jQuery未正常工作。
• 初始状态下滑块组件显示正常，但通过URL输入ID触发异步CanActivateChild加载后，滑块消失。

根index.html代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitness Hub</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./assets/assets/favicon/Frame 3.svg">

   <!--A bunch of CSS files that I believe are irrelvent. -->
  
  
   
</head>
<body>
  <app-root></app-root>
</body>


    <!--All Js Here-->
    <!-- jquery latest version (note: I first used jquery in node_modules and 
it give me MIME type ("text") is not executable. 
I changed to use the CDN and I am not getting the error in console 
but I am still not seeing my components.) -->
    <script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script> 

    <!--Other JS files ...-->
   
    <!-- template main js file -->
    <script src="./assets/assets/js/main.js"></script>
</html>

路由模块中的异步CanActivateChild函数 #

const canActivateChild: CanActivateChildFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
    let authenticated = new Promise<boolean>((resolve, rej) => {
      inject(HttpClient).get('{{// my API endpoint}}').subscribe((res) => {
        if (res.hasOwnProperty(route.params['id'])) {
          resolve(true)
        }
        else {
          resolve(false)
        }
     })
    })
  
    return authenticated // notice a promise is being returned!!!
}

内容的提问来源于stack exchange，提问作者Issac Howard