0

Tego un proyecto angular en el cual puse una plantilla de internet que contiene animaciones con JQuery y Slick.

Tengo en el del index.html, las importaciones de css y al final del del index.html los de los distintos javascript y librerias.

El html de la plantilla lo dividi en distintos componentes, uno para el head de la pagina, donde va el menu y logo, uno para el footer y uno para todo el body.

El problema es que no me cargan las animaciones de jquery y slick.

Me funciona si pongo todo el html en el index.html pero no seria mantenible la aplicación de esa forma y no tendria el estandar que tiene angular.

Si alguien me puede ayudar lo agradeceria.

La estructura del proyecto es el siguiente: estructura de proyecto

index.html

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Bingo One page parallax responsive HTML Template ">
    
    <meta name="author" content="Themefisher.com">
  
    <title>Bingo | Responsive Multipurpose Parallax HTML5 Template</title>

    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    <!-- CSS
    ================================================== -->
    <!-- Themefisher Icon font -->
    <link rel="stylesheet" href="assets/plugins/themefisher-font/style.css">
    <!-- bootstrap.min css -->
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
    <!-- Lightbox.min css -->
    <link rel="stylesheet" href="assets/plugins/lightbox2/dist/css/lightbox.min.css">
    <!-- animation css -->
    <link rel="stylesheet" href="assets/plugins/animate/animate.css">
    <!-- Slick Carousel -->
    <link rel="stylesheet" href="assets/plugins/slick/slick.css">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="assets/css/style.css">

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>


  <app-root></app-root>

  
   <!-- 
    Essential Scripts
    =====================================-->
    <!-- Main jQuery -->
    <script src="assets/plugins/jquery/jquery.min.js"></script>
    <!-- Google Map -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu5nZKbeK-WHQ70oqOWo-_4VmwOwKP9YQ"></script>
    <script  src="assets/plugins/google-map/gmap.js"></script>

    <!-- Form Validation -->
    <script src="assets/plugins/form-validation/jquery.form.js"></script> 
    <script src="assets/plugins/form-validation/jquery.validate.min.js"></script>
    
    <!-- Bootstrap4 -->
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- Parallax -->
    <script src="assets/plugins/parallax/jquery.parallax-1.1.3.js"></script>
    <!-- lightbox -->
    <script src="assets/plugins/lightbox2/dist/js/lightbox.min.js"></script>
    <!-- Owl Carousel -->
    <script src="assets/plugins/slick/slick.min.js"></script>
    <!-- filter -->
    <script src="assets/plugins/filterizr/jquery.filterizr.min.js"></script>
    <!-- Smooth Scroll js -->
    <script src="assets/plugins/smooth-scroll/smooth-scroll.min.js"></script>
    
    <!-- Custom js -->
    <script src="assets/js/script.js"></script>

    
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

app.component.html

<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'amcwebpage';
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//Rutas
import { AppRoutingModule } from './app-routing.module';

//Component
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header/header.component';
import { FooterComponent } from './shared/footer/footer.component';
import { AmcpagesComponent } from './pages/amcpages/amcpages.component';
import { NosotrosComponent } from './pages/nosotros/nosotros/nosotros.component';
import { ServiciosComponent } from './pages/servicios/servicios/servicios.component';
import { EquipoComponent } from './pages/equipo/equipo/equipo.component';
import { ContactoComponent } from './pages/contacto/contacto/contacto.component';
import { PortafolioComponent } from './pages/portafolio/portafolio/portafolio.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    AmcpagesComponent,
    NosotrosComponent,
    ServiciosComponent,
    EquipoComponent,
    ContactoComponent,
    PortafolioComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

y tengo un componente amcpages donde se encuentra un banner que usa slick y jquery pero este no muestra las animaciones. si pongo todo el html en el index.html si muestra todo correctamente amcpages.component.html

<div class="hero-slider">
  <div class="slider-item th-fullpage hero-area" style="background-image: url(../assets/images/slider/slider-bg-1.jpg);">
      <div class="container">
          <div class="row">
              <div class="col-md-12 text-center">
                  <h1 data-duration-in=".3" data-animation-in="fadeInUp" data-delay-in=".1">Crafting Digital <br>
                      Experience</h1>
                  <p data-duration-in=".3" data-animation-in="fadeInUp" data-delay-in=".5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, <br> veritatis tempore nostrum id
                      officia quaerat eum corrupti, <br> ipsa aliquam velit.</p>
                  <a data-duration-in=".3" data-animation-in="fadeInUp" data-delay-in=".8" class="btn btn-main" href="service.html">Explore Us</a>
              </div>
          </div>
      </div>
  </div>
  <div class="slider-item th-fullpage hero-area" style="background-image: url(../assets/images/slider/slider-bg-2.jpg);">
      <div class="container">
          <div class="row">
              <div class="col-md-12 text-center">
                  <h1 data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".1">We Combine Design <br> and
                      Creativity</h1>
                  <p data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".5">Create just what you need
                      for your Perfect Website. Choose from a wide range
                      <br> of Elements & simply put them on our Canvas.</p>
                  <a data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".8"  class="btn btn-main" href="service.html">Explore Us</a>
              </div>
          </div>
      </div>
  </div>
</div>
6
  • Esto puede servirte es.stackoverflow.com/a/399611/55132
    – Lobos
    Commented el 21 jul. 2022 a las 14:18
  • Me funciono a la perfección!!! pero me genero otro problema. cuando salto de un componente a otro, cuando vuelvo a la pagina principal (home) no me carga de nuevo los jquery. intente colocando tambien el init de la funcion main en ese componente pero no funciono. Otra cosa que me pasa es que si intento ingresar con una url(localhost:4200/nosotros) que no sea del home(localhost:4200/amcpages) no carga la pagina. Si puedes ver mi repo lo agradeceria: github.com/cristiancgrs/webamc.git
    – Cristian
    Commented el 22 jul. 2022 a las 2:05
  • La verdad es que usar Jquery y Angular no es recomendable, justo por los problemas que estás viendo. Es mejor buscar una plantilla que sea hecha para Angular.
    – Lobos
    Commented el 22 jul. 2022 a las 2:08
  • Entonces no se puede solucionar?
    – Cristian
    Commented el 22 jul. 2022 a las 2:20
  • Revisé el repo. Has estos cambios: 1. En todos los componentes remueve el throw del ngOnInit; 2. En el componente principal ejecuta el main en el ngOnInit.
    – Lobos
    Commented el 22 jul. 2022 a las 2:35

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.