Question

当我的角度应用程序运行时，我发现有些奇怪的事情。当我添加console.log时，它将拍摄两次。
不仅console.log，而且每个调用的函数也拍摄两次，每个请求都发生两次。起初，我以为主要组件运行了两次。但是后来我注意到我应用程序中的每个组件都在执行此操作。登录时，打开任何页面时，任何组件都会执行两次操作，并且每个API请求执行两次。
这显然很糟糕。效率低下，并在应用程序周围产生许多问题（例如，当我到达页面底部时，它应该给我带来50个额外的项目，它带来了100个项目，当我尝试在数据库中发布内容时，它会发布两次）。
经过研究，看来这可能是我的路由器存在的问题，但事实并非如此。我相信，因为如果我删除AppComponent的router-outlet，则AppComponent仍会在Init上拍摄两次。所以我真的不知道发生了什么。我很迷茫，不知道什么样的代码可以在这里向大家展示。
我认为这可能是相关的：

索引：

<!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 {

}

（均为空）

路由器：

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;
  }
}

如果您认为还有任何其他有趣的代码，请告诉我。可能是什么原因造成的？

编辑：在我的appComponent中执行console.trace（）之后（也运行两次）：

这是我的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));

Answer 1

我有完全相同的问题。幸运的是，Poul Krujit的提示最终将我引向了解决方案。

就我而言，在文件“ main.ts”中，以下代码导致该应用运行了两次（显然）。

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


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

删除第二个实例解决了这个问题。

（角度）完整应用同时运行两次

1 个答案: