2

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):

enter image description here

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));
6
  • Very weird issue. You can try to add a console.trace in your AppComponent. To see what the stack trace is, maybe it can give more information. And can you post your main.ts file? Maybe you are bootstrapping the app twice Feb 28, 2019 at 14:24
  • Did it :/ i dont think the problem is in main, even without the cntents (commenting) the problem persists. Also, even before calling it, on my login page, the page is already starting twice
    – CH4B
    Feb 28, 2019 at 14:35
  • That's not the main.ts i was talking about :) the main.ts which bootstraps the application. This is run before the AppComponent Feb 28, 2019 at 14:42
  • Sorry about that @PierreDuc ! Now i added the main.ts, tho i never changed it
    – CH4B
    Feb 28, 2019 at 14:44
  • Did you find the solution?
    – Messing
    Feb 5, 2020 at 14:25

2 Answers 2

4

I had the exact same Issue. Luckily the hints by Poul Krujit finally lead me to the solution.

In my case, in the file "main.ts" the following code caused the app to run twice (obviously).

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [{provide: LOCALE_ID, useValue: lang }]
});


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

removing the second instance solved the problem.

1

Extending Jeremias Nater answer, I found the bootstraping code:

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

to be present both in main.ts and app.module.ts, causing it to launch twice. How it happened is beyond me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.