Failed to export .guard to another lib Angular

Question

im trying to use a Router Guard from shared lib into app routing module (at app level).

i created this RouterGuard (route.guard.ts):

@Injectable({
  providedIn: 'root'
})

export class RouteGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    this.router.navigate(['login']);
    return false;
  }
}

On shared lib im trying to export this class.

import {RouteGuard} from './auth/guard/route.guard';

@NgModule({
  imports: [CommonModule, MaterialModule, RouteGuard],
  exports: [MaterialModule, RouteGuard]
})
export class SharedModule {}

And finally, i need to use this guard to check my route, at app level.

const routes: Routes = [
  {
    path: '',
    component: LoggedComponent,
    children: [
      {path: '', component: HomeComponent}
    ],
    // Here
    canActivate: [RouteGuard]
  },
  {
    path: '',
    component: AuthComponent,
    children: [
      {path: '', redirectTo: 'login', pathMatch: 'full'},
      {path: 'login', component: LoginComponent},
      {path: 'signin', component: SigninComponent}
    ]
  }
];

But im getting this error:

error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors

11 export class SharedModule {}

Answer 1

you can only import it into one location, you are importing it into app-module and sharedmodule. this is causing you the problems, remove the guard import from app-module and only import it like you are doing into shared module then import shared module directly into app module. then import your guard into your app-router module.

as an aside I always make my router guards based upon an observable but it appears again your issue is related to importing into multiple modules.

 canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> {
    
    this.router.navigate(['login']);
        return false;
    }