I was following this tutorial and everything worked great, no problems at all... Until I clicked on my navbar links and it showed the splash screen every time I clicked on one of them, refreshes my page and it doesn't even directs you to the section in question. My page is a single page app and the navbar links just re-directs you to different sections of the page.
I'm new in the whole thing so I didn't knew what to do tbh, the only solution I found was using (click)="$event.preventDefault()", but that just makes my navbar links useless.
I followed every step and my code is the exact same from the tutorial, but I'm gonna add it if there's maybe something wrong with it specifically.
The splash screen service:
import { Injectable } from '@angular/core';
import { Subscription, Subject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class SerLoaderService {
subject = new Subject();
subscribe(onNext: any): Subscription {
return this.subject.subscribe(onNext);
}
stop() {
this.subject.next(false);
}
}
The splash screen component:
import { Component, OnInit } from '@angular/core';
import { SerLoaderService } from '../servicios/ser-Loader.service';
@Component({
selector: 'app-loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.css'],
})
export class LoaderComponent implements OnInit {
// The screen starts with the maximum opacity
public opacityChange = 1;
public splashTransition: any;
// First access the splash is visible
public showSplash = true;
readonly ANIMATION_DURATION = 1;
private hideSplashAnimation() {
// Setting the transition
this.splashTransition = `opacity ${this.ANIMATION_DURATION}s`;
this.opacityChange = 0;
setTimeout(() => {
// After the transition is ended the showSplash will be hided
this.showSplash = !this.showSplash;
}, 1000);
}
constructor(private loaderService: SerLoaderService) {}
ngOnInit(): void {
// Somewhere the stop method has been invoked
this.loaderService.subscribe((res: any) => {
this.hideSplashAnimation();
});
}
}
The homepage component:
import { Component } from '@angular/core';
import { SerLoaderService } from '../servicios/ser-Loader.service';
@Component({
selector: 'app-index',
templateUrl: './index.component.html',
})
export class IndexComponent {
constructor(private LoadingService: SerLoaderService) {}
ngOnInit(): void {
setTimeout(() => {
this.LoadingService.stop();
}, 10000);
}
}
My navbar:
<nav class="navbar navbar-expand-lg" id="navegacion" aria-label="fixed navbar">
<div class="container-fluid">
<div class="collapse navbar-collapse d-flex justify-content-around" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 w-100 justify-content-around">
<div class="row">
<div class="col">
<li class="nav-item">
<a class="nav-link" id="resaltado" (click)="loginModal(loginmodal)"
*ngIf="!EstaLoggeado">Login</a>
<a class="nav-link" id="resaltado" (click)="onLogout()" *ngIf="EstaLoggeado">Logout</a>
</li>
</div>
<div class="col">
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
</div>
<div class="col">
<li class="nav-item">
<a class="nav-link" href="#Experiencia" (click)="$event.preventDefault()">Experiencia</a>
</li>
</div>
<div class="col">
<li class="nav-item">
<a class="nav-link" href="#Proyectos">Proyectos</a>
</li>
</div>
<div class="col">
<li class="nav-item">
<a class="nav-link" href="#Contacto">Contacto</a>
</li>
</div>
</div>
</ul>
</div>
</div>
</nav>
Thank you very much for the help!
EDIT: I just found out it also doesn't load my routed links. It just shows the splash screen and nothing more lol
