Skip to main content
AngularJS(Angular 1) y Angular(Angular 2+) son considerados frameworks distintos. Aquí se utiliza solo Angular por tanto lo correcto es poner solo esa etiqueta en la pregunta para evitar confusiones y que solo aparezca en las búsquedas de la etiqueta correspondiente.
Enlace
Aviso eliminado Atraer atención por Miguel Clavijo
Recompensa finalizada con Lobos's answer elegida por Miguel Clavijo
Mejoras en explicación.
Origen Enlace
Miguel Clavijo
  • 363
  • 1
  • 3
  • 23

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

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

Corrección de ortografía
Origen Enlace
Israel-ICM
  • 3.6k
  • 25
  • 20
  • 26

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

Este es mi archivo Angular.jsonAngular.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 JSJS no funciónfuncionan correctamente, haciendo pruebas, si coloco el contenido HTML que hace uso del JS en app.component.htmlapp.component.html funciona correctamente pero si el HTML esta en un modulo o componente diferente este no funciona.

Edit

Edit

Tengo un modulo layaout Ylayout y el componente Menú de nombre navigationnavigation que hace uso de JS con el siguente codigosiguiente 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 skeletonskeleton este es el código.:

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 aquiapp.routing.module aquí el codigocó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 { }

Y en mi index.htmlindex.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>

Tengo un problema con mis scripts personalizados, ya que no son leídos por los módulos o el componente de layaout 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 función 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 layaout Y el componente Menú de nombre navigation que hace uso de JS con el siguente codigo:

<!-- 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.

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 aqui el codigo:

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 { }

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>

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:

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 { }

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>
Aviso añadido Atraer atención por Miguel Clavijo
Recompensa iniciada por un valor de 50 de reputación por Miguel Clavijo
ampliación de descripción y código.
Origen Enlace
Miguel Clavijo
  • 363
  • 1
  • 3
  • 23
Loading
Origen Enlace
Miguel Clavijo
  • 363
  • 1
  • 3
  • 23
Loading