Tengo un problema con mis scripts personalizados, ya que no son leídos por los módulos o el componente de *layout* el cual me sirve de plantilla, el menú y algunos componentes de las paginas que hacen uso de los archivos *JS*.

Este es mi archivo `Angular.json`:
```
"styles": [
  "src/styles.css",
  "src/assets/css/noscript.css",
  "src/assets/css/mycss.css",
  "src/assets/css/main.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "src/assets/js/jquery.min.js",
  "src/assets/js/jquery.dropotron.min.js",
  "src/assets/js/jquery.scrolly.min.js",
  "src/assets/js/jquery.scrollex.min.js",
  "src/assets/js/browser.min.js",
  "src/assets/js/breakpoints.min.js",
  "src/assets/js/util.js",
  "src/assets/js/main.js"
]
```
El apartado de estilos funciona correctamente en cada componente y modulo de la aplicación pero los archivos *JS* no funcionan correctamente, haciendo pruebas, si coloco el contenido HTML que hace uso del JS en `app.component.html` funciona correctamente pero si el HTML esta en un modulo o componente diferente este no funciona.

Edit
-
Tengo un modulo layout y el componente Menú de nombre *navigation* que hace uso de JS con el siguiente código:
```
<!-- Nav -->
<nav id="nav">
  <ul>
    <li><a href="./Inicio">Inicio</a></li>
    <li>
      <a href="./EnConstruccion">San Roque En Cifras</a>
      <ul>
        <li><a href="">Lorem ipsum dolor</a></li>
        <li><a href="">Magna phasellus</a></li>
        <li><a href="">Etiam dolore nisl</a></li>
        <li>
          <a href="">And a submenu &hellip;</a>
          <ul>
            <li><a href="">Lorem ipsum dolor</a></li>
            <li><a href="">Phasellus consequat</a></li>
            <li><a href="">Magna phasellus</a></li>
            <li><a href="">Etiam dolore nisl</a></li>
          </ul>
        </li>
        <li><a href="">Veroeros feugiat</a></li>
      </ul>
    </li>
    <li><a href="./EnConstruccion">Acerca del Proyecto</a></li>
    <li><a href="./NuestroEquipo">Nuestro Equipo</a></li>
    <li><a href="./NuestraComunidad">Nuestra Comunidad</a></li>
    <li><a href="./EnConstruccion">Contactos</a></li>
  </ul>
</nav>
```
El cual se vincula a una platilla cuyo nombre es *skeleton* este es el código:
```
<app-navigation></app-navigation>
  <router-outlet></router-outlet>
<app-footer-pag></app-footer-pag>
```
Este componente llama a el menú y pie de pagina, luego uso un sistema de rutas hijas para llamar a otros modelos y usar mi plantilla de diseño esto en el `app.routing.module` aquí el código:
```
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SkeletonComponent } from './layout/skeleton/skeleton.component';

const routes: Routes = [
  {
    path:'',
    component: SkeletonComponent,
    children:[
      {
        path:'Inicio',
        loadChildren:()=> import('./modules/inicio/inicio.module').then( (m) => m.InicioModule)
      },
      {
        path:'NuestroEquipo',
        loadChildren:()=> import('./modules/nuestroequipo/nuestroequipo.module').then( (m) => m.NuestroEquipoModule)
      },
      {
        path:'NuestraComunidad',
        loadChildren:()=> import('./modules/comunidad/comunidad.module').then( (m) => m.InicioModule)
      },
      {
        path:'EnConstruccion',
        loadChildren:()=> import('./modules/construccion/construccion.module').then( (m) => m.ConstruccionModule)
      },
      {
        path:'',
        loadChildren:()=> import('./modules/inicio/inicio.module').then( (m) => m.InicioModule)
      },
      {
        path:'**',
        loadChildren:()=> import('./modules/error/error.module').then( (m) => m.ErrorModule)
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```

En mi app.component.html tengo el siguiente codigo:

    <router-outlet></router-outlet>

Y en mi `index.html` tengo lo siguiente:
```
<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Tsm San Roque</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body class="left-sidebar is-preload">
    <div id="page-wrapper">
      <app-root></app-root>
    </div>
  </body>
</html>
```
Cabe resaltar que el menú que tengo en componente no funciona su JS si esta el código HTML en el componente pero si funciona el menú de manera correcta si esta en el `index.html`.


Como funciona actualmente:

https://psbveredasanroque.social/

Como debería Funcionar: 

https://html5up.net/helios

(En mi pagina no funciona el despliegue de los submenus y la galeria.)

Repositorio Git:

https://github.com/miguelEdCl/root.git