2

I'm having a problem with an import of BrowserAnimationsModule. In two of my components I'm running some typescript to create a cursor animation which is breaking when i import BrowserAnimationsModule. No implementation, just importing alone is causing the problem. I'll post code here and explain specifically what it's breaking below it.

This is breaking things,

    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    @NgModule({
      declarations: [
        AppComponent,
        HeaderComponent,
        HomeComponent,
        WelcomeComponent,
        PortfolioComponent,
        AboutComponent,
        ContactComponent,
        ArrowsComponent,
        ArrowsUpComponent,
        SidebarComponent
        
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        NgbModule,
        MatSlideToggleModule,
        FormsModule,
        ReactiveFormsModule, 
        HttpClientModule,
        BrowserAnimationsModule
      ],
      providers: [ContactService, ConnectionService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

This is working, just by commenting out the import

//import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    WelcomeComponent,
    PortfolioComponent,
    AboutComponent,
    ContactComponent,
    ArrowsComponent,
    ArrowsUpComponent,
    SidebarComponent
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    MatSlideToggleModule,
    FormsModule,
    ReactiveFormsModule, 
    HttpClientModule
    //BrowserAnimationsModule
  ],
  providers: [ContactService, ConnectionService],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is the typescript of the component that is being broken

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HomeComponent } from '../home/home.component';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {


  constructor(private router: Router) { }

  goToPage(pageName:string): void
  {
    this.router.navigate(['$pageName']);
  }
  
  ngOnInit(): void {
    (function (main) {
      main();
    })(function () {
      "use strict";
    
      var c = <HTMLCanvasElement>document.getElementById("c");
      var ctx = c.getContext("2d");
    
      var WIDTH = (c.width = window.innerWidth);
      var HEIGHT = (c.height = window.innerHeight);
      var mouse = {
        x: 0,
        y: 0,
        isMoved: false
      };
    
      var Particle = function () {
        this.x = 0;
        this.y = 0;
        this.vx = 0;
        this.vy = 0;
        this.r = 50;
        this.g = 255;
        this.b = 255;
        this.a = 0;
        this.life = 0;
        this.radius = Math.random() * 5;
      };
    
      Particle.prototype = {
        constructor: Particle,
        update: function () {
          if (this.life > 0) {
            this.life -= 2;
            if (this.life < 50) {
              this.vx += Math.random() * 4 - 2;
              this.vy += Math.random() * 4 - 2;
              this.vx *= 0.9;
              this.vy *= 0.9;
              this.x += this.vx;
              this.y += this.vy;
              this.a = this.life / 50;
            }
          }
        },
        render: function (ctx) {
          ctx.save();
          ctx.fillStyle =
            "rgba(" + this.r + ", " + this.g + ", " + this.b + ", " + this.a + ")";
          ctx.translate(this.x, this.y);
          ctx.beginPath();
          ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
          ctx.fill();
          ctx.restore();
        },
        reset: function (tx, ty) {
          this.x = tx;
          this.y = ty;
          this.vx = Math.random() * 4 - 1;
          this.vy = Math.random() * 4 - 1;
          this.life = 150;
          this.a = 1;
          //this.g = Math.round(255 * (this.x / WIDTH));
          //this.b = Math.round(255 * (this.y / HEIGHT));
          this.radius = Math.random() * 5;
        }
      };
    
      var particles = [];
      var particle = null;
      var particleCount = 500;
      var tx = 0;
      var ty = HEIGHT / 2;
      var idx = 0;
      var temp = {
        vx: Math.random() * 4 - 2,
        vy: Math.random() * 4 - 2,
        x: WIDTH / 2,
        y: HEIGHT / 2
      };
    
      for (var i = 0; i < particleCount; i++) {
        particle = new Particle();
        particles.push(particle);
      }
    
      function spawn(target) {
        tx += (target.x - tx) * 0.2;
        ty += (target.y - ty) * 0.2;
    
        particles[idx].reset(tx, ty);
        if (++idx >= particles.length) idx = 0;
      }
    
      c.addEventListener("mousemove", function (e) {
        var rect = c.getBoundingClientRect();
        mouse.x = e.clientX - rect.left;
        mouse.y = e.clientY - rect.top;
        mouse.isMoved = true;
    
        spawn(mouse);
      });
    
      requestAnimationFrame(function loop() {
        requestAnimationFrame(loop);
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
    
        if (!mouse.isMoved) {
          temp.vx += Math.random() * 4 - 2;
          temp.vy += Math.random() * 4 - 2;
          temp.vx *= 0.98;
          temp.vy *= 0.98;
          temp.x += temp.vx;
          temp.y += temp.vy;
          if (temp.x > WIDTH) {
            temp.x = WIDTH;
            temp.vx *= -1;
          }
          if (temp.x < 0) {
            temp.x = 0;
            temp.vx *= -1;
          }
          if (temp.y > HEIGHT) {
            temp.y = HEIGHT;
            temp.vy *= -1;
          }
          if (temp.y < 0) {
            temp.y = 0;
            temp.vy *= -1;
          }
          spawn(temp);
        }
    
        for (var i = 0; i < particleCount; i++) {
          particle = particles[i];
          particle.update();
          particle.render(ctx);
        }
      });
    });
  }

}

To spare unnecessary details, it's just a cursor trail that follows the cursor with an animation of dots. For some reason the import alone is breaking my cursor trail, however, when I refresh the page it starts working. I've even removed any animation from the routing of the corresponding components to ensure it's literally only the import causing this problem.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { HomeComponent} from './home/home.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { WelcomeComponent } from './welcome/welcome.component';

const routes: Routes = [
  {path: '', component: WelcomeComponent},
  {path: 'home-component', component: HomeComponent},
  {path: 'portfolio-component', component:PortfolioComponent, data: {animation: 'PortfolioPage'}},
  {path: 'contact-component', component:ContactComponent, data: {animation: 'ContactPage'}},
  {path: 'about-component', component:AboutComponent, data: {animation: 'AboutPage'}}
];

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

All of my animation code is commented out and not implemented as well. Basically what I'm saying is ive 100% narrowed it down to the import alone causing the problem. I'm assuming that somehow the import is somehow causing the ngOnInit(): to not execute? Idk I've spent several hours debugging at this point, not sure what to do. Any help is appreciated. I'll post my repo if anyone needs to take a closer look. Thanks

https://github.com/Joello24/Joello24.github.io

RobertL
  • 21
  • 1
  • 5
  • are you importing it more then once? i mean, once on each component? – The Fabio Jan 04 '22 at 04:43
  • has you in your `package.json` the `dependencies": { "@angular/animations": "^10.0.9",...}`? (or the version you need). NOTE: the BrowserAnimationsModule is imported in the main.module, not in components, in components you import from `'@angular/animations'`what you need: "style, animate, AnimationBuilder, ...." – Eliseo Jan 04 '22 at 08:32

0 Answers0