When my angular app runs, I noticed something quite odd. When I add a console.log
, it shoots twice.
Not only the console.log but every called function is also shooting twice, every request is happening twice. At first, I thought the main component was running twice. But then I noticed that every single component in my app is doing this. when I log in, when I open any page, any component is doing everything twice and doing every API request twice.
This is clearly awful. Inefficient, and creates many problems around the app (for example, when I reach the bottom of a page, it should bring me 50 extra items, it's bringing 100, when I try to post something in my DB, it posts twice).
After some research, it seems like it could be a problem in my router, but that is not the case. I believe in that because if I remove the router-outlet
of my AppComponent, the AppComponent still shoots twice onInit. So I really don't know what's going on. I'm so lost that I don't know what kind of code show you guys here.
This is what I believe might be relevant:
index:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PP</title>
<base href="/">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app:
<router-outlet></router-outlet>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
(Both empty)
Router:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from 'src/login/login/login.component';
import { CadastroDivulgadorComponent } from './cadastro-divulgador/cadastro-divulgador.component';
import { MainComponent } from './main/main.component';
import { NotFoundComponent } from 'src/errors/not-found/not-found.component';
import { AuthGuard } from './guards/auth.guard';
import { LoginGuard } from './guards/login.guard';
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: '/login',
},
{
path: 'login',
component: LoginComponent,
canActivate: [LoginGuard]
},
{
path: 'cadastro/divulgador',
component: CadastroDivulgadorComponent,
canActivate: [LoginGuard]
},
{
path: 'main',
component: MainComponent,
canActivate: [AuthGuard]
},
{
path: '**',
redirectTo: 'not-found'
},
{
path: 'not-found',
component: NotFoundComponent
}
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
loginGuard:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { UserService } from '../user/user.service';
@Injectable({
providedIn: 'root'
})
export class LoginGuard implements CanActivate {
constructor(
private userService: UserService,
private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if(!this.userService.isLogged()){
return true;
}
this.router.navigate(['main']);
return false;
}
}
If you think any other piece of code would be interesting, tell me. What could be causing this?
EDIT: After doing a console.trace() in my appComponent (running twice as well):
And this is my main.ts:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
console.trace
in your AppComponent. To see what the stack trace is, maybe it can give more information. And can you post yourmain.ts
file? Maybe you are bootstrapping the app twicemain.ts
which bootstraps the application. This is run before the AppComponent