feat(angular16): fix inject problem out of allowed zones

Author: Ismaestro

src/app/modules/auth/auth.routes.ts

@@ -7,11 +7,11 @@ import { LogoutPageComponent } from '~modules/auth/pages/logout-page/logout-page
 import { noAuthenticationGuard } from '~modules/shared/guards/no-authentication.guard';
 
 export const AUTH_ROUTES: Route[] = [
-  { path: authPaths.logIn, component: LogInPageComponent, canActivate: [noAuthenticationGuard()] },
+  { path: authPaths.logIn, component: LogInPageComponent, canActivate: [noAuthenticationGuard] },
   {
     path: authPaths.register,
     component: RegisterPageComponent,
-    canActivate: [noAuthenticationGuard()],
+    canActivate: [noAuthenticationGuard],
   },
   {
     path: authPaths.logout,

src/app/modules/shared/guards/no-authentication.guard.ts

@@ -1,17 +1,15 @@
 import { userRoutes } from '~modules/user/shared/user-routes';
 import { inject } from '@angular/core';
-import { CanActivateFn, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { AuthRepository } from '~modules/auth/store/auth.repository';
 
-export function noAuthenticationGuard(): CanActivateFn {
-  return () => {
-    const authRepository: AuthRepository = inject(AuthRepository);
-    if (!authRepository.isLoggedInValue()) {
-      return true;
-    } else {
-      const router: Router = inject(Router);
-      router.navigate([userRoutes.dashboard]);
-      return false;
-    }
-  };
-}
+export const noAuthenticationGuard = () => {
+  const authRepository: AuthRepository = inject(AuthRepository);
+  if (!authRepository.isLoggedInValue()) {
+    return true;
+  } else {
+    const router: Router = inject(Router);
+    router.navigate([userRoutes.dashboard]);
+    return false;
+  }
+};

src/app/modules/user/user.routes.ts

@@ -10,17 +10,17 @@ export const USER_ROUTES: Route[] = [
   {
     path: userPaths.dashboard,
     component: DashboardPageComponent,
-    canActivate: [authenticationGuard()],
+    canActivate: [authenticationGuard],
   },
   {
     path: userPaths.myHeroes,
     component: MyHeroesPageComponent,
-    canActivate: [authenticationGuard()],
+    canActivate: [authenticationGuard],
   },
   {
     path: userPaths.myAccount,
     component: MyAccountComponent,
-    canActivate: [authenticationGuard()],
+    canActivate: [authenticationGuard],
   },
   { path: '**', redirectTo: appPaths.error404 },
 ];

src/main.ts

@@ -61,7 +61,7 @@ bootstrapApplication(AppComponent, {
         link: ApolloLink.from([
           setContext((operation, prevContext) => ({
             headers: {
-              ...prevContext.headers,
+              ...prevContext['headers'],
               'Accept-Language': authRepository.locale,
             },
           })),