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}
Related
I have a vuetify (vue 3) app. When I (hard) refresh my web app, I'd like to be redirected to my very first route (for isntance, Skills). Instead I go to the last route I was on.
Here are my routes.
const routes = [
{
path: '/',
name: "Skills",
component: Skills,
beforeEnter: checkIfAuthenticated,
},
{
path: '/myskills',
name: "MySkills",
component: MySkills,
beforeEnter: checkIfAuthenticated,
},
{
path: '/history',
name: "History",
component: History,
beforeEnter: checkIfAuthenticated,
},
{
path: '/conversations',
name: "Conversations",
component: Conversations,
beforeEnter: checkIfAuthenticated,
},
{
path: '/:catchAll(.*)*',
name: "PageNotFound",
component: PageNotFound,
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
Thanks
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.
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
I am creating a very simple Angular 2.4 application and no matter what I try I cannot get a Module to lazy load. Is it at all possible please?
export const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'schedule', loadChildren: 'app/schedule/schedule.module.ts#ScheduleModule' },
{ path: 'plant', loadChildren: 'app/plant/plant.module.ts#PlantModule' }
];
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.