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