# Angular navigate後，舊的component沒有被清除

## 特徵：

  await this.router.navigate(['/main']);

以及`authGuard`失效

export const routes: Routes = [
  {
    path: 'login',
    loadComponent: () => import('@features/login/login.component').then(m => m.LoginComponent),
  },
  {
    path: 'main',
    canActivateChild: [authGuard], // 失效 (not work)
    loadChildren: () => import('@features/main-page/main-page.component').then(m => m.ROUTES),
  },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent },
];

## 錯誤原因：
`provideAnimations()`加在錯誤的地方，這個跟Browser的Provider有關係，具體我這菜鳥也不懂

**app.component.ts**

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { provideAnimations } from '@angular/platform-browser/animations';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  providers:[
    provideAnimations()
  ]
})
export class AppComponent {
}

## 解法：

將`provideAnimations()`放到`app.config.ts`中，因為版本不同，可能會在不同地方，可以找找看`provideRouter(routes)`在哪裡
**app.config.ts**

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
import { authInterceptor } from '@interceptors/auth.interceptor';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(), // <-這行
    provideRouter(routes),
    provideHttpClient(withFetch(), withInterceptors([authInterceptor]))
  ]
};