router outside canActivate: [AuthGuard] doesn't work

Question

I have a problem with my routing.

I tried to used this code:

const routes: Routes = [
  {
    path: 'home', component: HomeComponent, canActivate: [AuthGuard], children: [
      { path: 'events', component: EventsComponent },
      { path: 'package', component: PackageComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: 'home' },
  { path: "register", component: RegisterComponent },
  { path: "usersforgetpassword", component: ResetPassComponent }
];

Doesn't work navigate, forgot password (ResetPassComponent) and new account(RegisterComponent ).

Html code:

<StackLayout>
        <Label [nsRouterLink]="['/usersforgetpassword']" class="text-center footnote">
            <FormattedString>
                <Span text="Forgot password?  "></Span>
            </FormattedString>
        </Label>
    </StackLayout>
    <StackLayout>
        <Label [nsRouterLink]="['/register']" class="text-center footnote">
            <FormattedString>
                <Span text="New Account "></Span>
            </FormattedString>
        </Label>
    </StackLayout>

Please, can you ask me, what is the problem in my router? I can't understand.

Thnx

Answer 1

Please place these

{ path: "register", component: RegisterComponent },
  { path: "usersforgetpassword", component: ResetPassComponent }

Before

 { path: '**', redirectTo: 'home' }