Не удалось экспортировать .guard в другую библиотеку.

#angular #angular-routing #ng-modules #angular-guards

Вопрос:

я пытаюсь использовать защиту маршрутизатора из общей библиотеки в модуль маршрутизации приложений (на уровне приложения).

я создал этот 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;
  }
}
 

В общей библиотеке я пытаюсь экспортировать этот класс.

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

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

И, наконец, мне нужно использовать этот охранник для проверки моего маршрута на уровне приложения.

 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}
    ]
  }
];
 

Но я получаю эту ошибку:

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

11 export class SharedModule {}
 

Ответ №1:

вы можете импортировать его только в одно место, вы импортируете его в app-модуль и sharedmodule. это вызывает у вас проблемы, удалите импорт guard из app-модуля и импортируйте его только так, как вы делаете, в общий модуль, а затем импортируйте общий модуль непосредственно в модуль приложения. затем импортируйте свой guard в модуль маршрутизатора приложений.

в стороне я всегда делаю защиту маршрутизатора на основе наблюдаемого, но, похоже, ваша проблема снова связана с импортом в несколько модулей.

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