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
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}
in routing I have next:
{path: 'modules', component: ..., resolve: { modules: ModulesServiceResolver},
{path: 'modules/:id', component: ...}
and when I return back from child component - resolve not called one more time?
array of modules, which I get from modules resolver can be changed when I am in inner page. I want to get them?
how to call resolver one more time when return from child route?
UPD:
modules I have done as separate module
then in modules.routing done next
{
path: '',
component: ModulesComponent,
resolve: {
projects: ModulesService
},
runGuardsAndResolvers: 'always'
},
{
path: ':id',
loadChildren: () => import('./module/module.module').then(m => m.ModuleModule)
}
now works as needed
modules I have done as separate module then in modules.routing done next {
path: '',
component: ModulesComponent,
resolve: {
projects: ModulesService
},
runGuardsAndResolvers: 'always'
},
{
path: ':id',
loadChildren: () => import('./module/module.module').then(m => m.ModuleModule)
}
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.
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.