Javascript – How can define router guard in standalone components in Angular?

I have defined my routes as follows:

import { Routes } from '@angular/router';
import { domainGuard } from './guard-routes.service';
import { NotFoundComponent } from './notFound/not-found.component';
export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./home/home.component').then((m) => m.HomeComponent),
  },
  {
    path: 'users',
    loadComponent: () =>
      import('./user/user.component').then((m) => m.UserComponent),
  },
  {
    path: 'profile',
    loadComponent: () =>
      import('./profile/profile.component').then((m) => m.ProfileComponent),
  },
  { path: '**', component: NotFoundComponent },
].map((page: any) => {
  page.canActivate = [domainGuard];
  return page;
});

and My app.component.ts and app.config are defined as :

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'my-app';
}

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

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

I have used a functional guard for my routes as follows:

import { Router } from '@angular/router';
import { AuthService } from './auth.service';
import { inject } from '@angular/core';

export const domainGuard = () => {
  const router = inject(Router);
  const service = inject(AuthService);
  if (service.IsAuth()) {
    router.navigate(['/user']);
    return true;
  } else {
    router.navigate(['/profile']);
    return false;
  }
};

And my authService:

import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  isLoggedIn = false;

  login() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.isLoggedIn = true;
      }, 3000);
    });
  }

  logOut() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.isLoggedIn = false;
      }, 3000);
    });
  }

  IsAuth() {
    return this.isLoggedIn;
  }
}

Finally when I add my route guard to routes. the following error appears:

main.ts:5 ERROR NullInjectorError: NullInjectorError: No provider for _AuthService!.

How can solve it?