Angular AuthGuardが機能していません

Question

私はangular CanActivate Authguardインターフェイスを使用してコンポーネントを保護しています。

@Injectable()
export class AuthGuard implements CanActivate{

constructor(private router: Router, private authService: AuthenticationService) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {

    this.authService.isLoggedIn.take(1).map((isLoggedIn : boolean) => {

        if(!isLoggedIn){
            this.router.navigate(['/login']);
            return false;
        }

        return true;
    })

    this.router.navigate(['/login']);
    return false;
   }
}

このようにルーター構成に追加しました。

const appRoutes: Routes = [
{path : '',redirectTo : 'login',pathMatch : 'full'},
{ path: 'home', component: HomeComponent,canActivate : [AuthGuard] }
]

それをプロバイダー配列にも追加しました。

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [AuthGuard,  
ExpenseService,SellDetailService,AuthenticationService],
styleUrls: ['./app.component.css']
})

しかし、アプリケーションを実行すると、次のエラーが発生します

StaticInjectorError（AppModule）[AuthGuard]：
StaticInjectorError（Platform：core）[AuthGuard]：NullInjectorError：AuthGuardのプロバイダーがありません！

私はそれを正しく実装したと思いますが、うまくいきません。私は何を間違っていますか？

Answer 1

書き込み：{providedIn： 'root'} AuthGuardの@Injectable（）内