(Angular) 完整的应用程序同时运行两次答案

【问题标题】：(Angular) Full app running twice simultaneously(Angular) 完整的应用程序同时运行两次
【发布时间】：2019-02-28 14:20:18
【问题描述】：

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

索引：

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

应用程序：

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

登录卫士：

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

【问题讨论】：

非常奇怪的问题。您可以尝试在 AppComponent 中添加console.trace。要查看堆栈跟踪是什么，也许它可以提供更多信息。您可以发布您的main.ts 文件吗？也许您正在引导应用程序两次
做到了：/我认为问题不是主要问题，即使没有内容（评论）问题仍然存在。此外，即使在调用它之前，在我的登录页面上，该页面已经启动了两次
这不是我所说的 main.ts :) 引导应用程序的 main.ts。这是在 AppComponent 之前运行的
对@PierreDuc 感到抱歉！现在我添加了 main.ts，但我从未更改过它
找到解决方案了吗？

标签： angular routing

【解决方案1】：

我遇到了完全相同的问题。幸运的是，Poul Krujit 的提示终于让我找到了解决方案。

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

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


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

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

【讨论】：

【解决方案2】：

扩展 Jeremias Nater 答案，我找到了引导代码：

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

同时出现在 main.ts 和 app.module.ts 中，导致它启动两次。它是如何发生的，我无法理解。

【讨论】：