I'm doing forgot password in Angular when I received email and click it or copy paste it in browser it redirects to the login page with no reason with the both ways single and child case.
// { path: 'login', component: LoginComponent },
// { path: 'reset/:token', component: ResetPasswordComponent, pathMatch: 'full' },
{
path: 'guest',
component: GuestComponent,
canActivateChild: [GuestGuardService],
children: [
{
path: 'login',
component: LoginComponent
},
// {
// path: 'forgot',
// component: ForgotPassComponent,
// },
{
path: 'forgot/:token',
component: ResetPasswordComponent,
}
]
},
Guest component HTML has: <router-outlet></router-outlet>
When put link beside forgot password link it works, but it's not working from email.
Anyone has idea about it?
GuestGuardService only see if it is login doing logout.
Related
I hosted my angular 13 website on Github Pages and after I added i18n I have the following routing problem.
When I go to https://MyRepoName.github.io/base/en-US/ everything is fine and I get redirected to https://MyRepoName.github.io/base/en-US/home as it should.
But when I want to access some other route for example:
https://MyRepoName.github.io/base/en-US/welcome then I got redirected to https://MyRepoName.github.io/base/home
When I go to https://MyRepoName.github.io/base/welcome then everything is fine.
I have this code for routes:
const routes: Routes = [
{
path: 'welcome',
component: WelcomeComponent
},
{
path: 'home',
component: HomeComponent
},
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', redirectTo: 'home', }
];
If someone had the same issue pls help.
I have 1 index/404 file with <base href="/base/">
and folder en-US with index/404 file <base href="/base/en-US">
I also receive this info when I access: https://MyRepoName.github.io/base/welcome
Router Event: Od
NavigationStart(id: 1, url: '/en-US/welcome')
Od {id: 1, url: '/en-US/welcome', navigationTrigger: 'imperative', restoredState: null}
Router Event: qR
RoutesRecognized(id: 1, url: '/en-US/welcome', urlAfterRedirects: '/home', state:Route(url:'', path:'') { Route(url:'home', path:'home') } )
qR {id: 1, url: '/en-US/welcome', urlAfterRedirects: '/home', state: ob}
This may seems as a silly question but I can't understand this routing
routes.ts:
const APP_ROUTES: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'articles', component: ArticulosComponent },
{ path: 'article/:id', component: ArticuloComponent },
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: '**', pathMatch: 'full', redirectTo: 'notfound' }
];
When access to localhost:4200/article/6 the router redirects to localhost:4200/#/home but when manually wrote localhost:4200/#/article/6 works fine.
First, note # symbol, why is it there and what different does it cause? And... I specify 'manually' because even through code adding the # symbol to the path (ex. ) keeps redirecting to home
The main question/problem is "Which would be the correct link or rule in other to load the correct component?"
You can remove # from route changing value of useHash in app.module.ts
RouterModule.forRoot(ROUTES, { useHash: false }),
You can add pathMatch: 'full' with home and articles routes
So, I have a layout like this:
<div class="page-container">
<app-header></app-header>
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<app-side-nav></app-side-nav>
<app-broadcast-show></app-broadcast-show>
<router-outlet></router-outlet>
</div>
</div>
</div>
And all components are working well with this, except for one. This is my Router array:
const appRoutes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
{
path: 'admin', component: MainComponent, children: [
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'fund_transfers/deposits',
component: FundTransfersComponent,
children: [
{
path: 'edit',
component: DepositComponent
},
],
},
{
path: 'fund_transfers/withdrawals',
component: FundTransfersComponent,
},
{
path: 'profile',
component: ProfileComponent
},
{
path: 'broadcast',
component: BroadcastCreateComponent
}
]
},
];
Route
children: [
{
path: 'edit',
component: DepositComponent
},
],
Doesn't show when I click on a button that is leading there. I registered Component, created it like I created the rest of the components that are working, but it is not triggering constructor nor onInit, nor is it hiding the previous view and showing the deposit/edit.
Anybody has any solution to this?
Found out whats going on. If using route as child, then in the parent html I need to set router-outlet, not in the first in line, in my case, admin, but rather in fund_transfers/deposits.
I have been working with Nativescript with Angular 2 and Typescript and understand there are two options for the router outlet. The original angular <router-outlet> directive which can be used to show children routes of a component, and the <page-router-outlet> which is specific to nativescript routing. I have been using the latter and attempting to use the <router-outlet> directive but find that it acts the same. I want for example this scenario.
parent.component.html
<StackLayout>
<Button [nsRouterLink]="['/accounts/edit-account']"><Button>
<Button [nsRouterLink]="['/accounts/new-account']"><Button>
</StackLayout>
<router-outlet></router-outlet>
This has two buttons with nativescript nsRouterlink directive. I want the buttons to remain while the router-outlet updates with the child information.
here are the routes.
module.routing.ts
const Routes: Routes = [
{ path: "accounts", children: [
{path: "", component: ParentComponent },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
The problem is when I attempt this it replaces the entire screen without leaving the buttons in place as would do the <page-router-outlet> directive.
I've even followed this documentation by Nativescript and the example does not act as the documentation declares.
Can anyone steer me in the right direction?
Following the Nativescript Documentation again works ok. The solution in general is in the routing to change from
const Routes: Routes = [
{ path: "accounts", children: [
{path: "", component: ParentComponent },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
to
const Routes: Routes = [
{ path: "accounts", component: ParentComponent, children: [
{path: "", redirectTo: "/accounts/new-account", pathMatch: 'full' },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
Finding this I have a new issue that I will post in a different question and link to this answer later.
I have the following configuration for my Angular2 routes...
RouterModule.forRoot([
{
path: '',
// redirectTo: '/admin',
component: LoginComponent,
pathMatch: 'full'
},
{
path: "admin",
component: ContentComponent,
children: [
{
path:"admin",
component: HeaderComponent,
outlet: 'header'
},
{
path:"admin",
component: LeftNavComponent,
outlet: 'header'
},
{
path:"admin",
component: AdminComponent,
outlet: 'body'
}
]
}
])
This works good but I don't really need a path for the children and the navigation (["/admin", {outlets: {"header":["admin"], "body":["admin"], "leftNav":["admin"]}}];) and the url (#/admin/(header:admin//body:admin//leftNav:admin)) are really long. Since I can infer the children is there a way I can leave them out?
When I upgraded from #angular/router v3.1.2 to v3.2.0 it started working as I would expect.