How can i set as default a child state with ui-router and angular.io?
I have a section about, with some child-states. What i want to do is that when i go in the about section, by default it renders the first child state.
You can redirect for default child route like this:
{
path: 'course',
component: CourseComponent,
children: [
{
path: 'list',
component: CourseListComponent
},
{
path: 'taking',
component: TakingCourseComponent
},
{
path: '**',
redirectTo: 'list', // this work like as default custom route.
pathMatch: 'full'
}
]
},
Related
i have a left side navigation in home component, the navigation dropdown is not working in one of the routing module (admin-routing.module.ts).
the navigation is working in app-routing.module.ts "path:'home'"
the component file is same in the two routing modules
i am new in angular, i am using angular 14v
i have a component name with "home"
i used two routing
app-routing.module.ts
admin-routing.module.ts
This goes inside app-routing.module.ts
const routes: Routes =
[
{ path: 'login', component: LoginComponent },
{ path: 'forgot-password', component: ForgotPasswordComponent },
{ path: 'not-found', component: NotFoundComponent },
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{
path: 'admin',
loadChildren: () =>
import('./modules/admin/admin.module').then((m) => m.AdminModule)
},
{path:'home', component:HomeComponent},
{ path: '**', component: NotFoundComponent },
];
This goes inside admin-routing.module.ts
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full'},
{ path: 'dashboard', component: DashboardComponent }
]
}
];
i also added the script file path in angular.json
the navigation dropdown and toogle is not working in admin-routing.module.ts's "home path"
i hosted these files in my server
working navigation link is http://angular.byteinnovations.in/home
this navigation is not working http://angular.byteinnovations.in/admin/home
As i see in your routing
const routes: Routes = [
{
path: '',
component:HomeComponent,
children:
[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
]
}
];
You are using HomeComponent two times can you check and do it in this way on your adminRouting Module
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
]
In my routes file I am trying to achieve the following.
const routes: Routes = [{ ...
{ path: '', component: MainComponent, children: [
{ path: 'routeA', component: ComponentA },
{ path: 'routeA/subA', component: ComponentAA},
{ path: 'routeA/subB', component: ComponentAB},
{ path: 'routeA/**', redirectTo: 'routeA'}
]}, ...}
The intention being that routeA/ will redirect back to routeA, but the above code doesnt achieve the intended effect.
I have a few components that are all under account.
Username
Password
Profile
...
I want to have a parent component like how the app-component works, with a <router-outlet></router-outlet>, so that the main html of the parent component never changes but the contents of the <router-outlet></router-outlet>.
How do I go about this?
You can define your component route like
const appRoutes: Routes = [
{ path: '/main', component: appComponent },
{ path: 'login/:id', component: LoginComponent },
{
path: 'users',
component: userListComponent,
data: { title: 'User List' }
},
{ path: '',
redirectTo: '/users',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
#NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
// other imports here
],
...
})
export class AppModule { }
then in your appComponent.html
<h1>your html</h1>
<router-outlet></router-outlet>
<h1>your html</h1>
https://angular.io/guide/router
You can use children or loadChildren(For Lazy Loading) concepts.
export const AppRoutes:Routes = [
{path: 'account', component: AccountComponent, children: [
{path: 'login', component: LoginComponent},
{path: 'profile', component: ProfileComponent}
]
In AccountComponent, you can add all common APIs and logic
In AccountComponentTemplate, add <router-outlet></router-outlet>
Use Angular Modularization concept for better maintenance.
Define your routes something like this:
const appRoutes: Routes = [
{ path:"", component: HomeComponent},
{ path:"accounts", component: AccountComponent, children:[
{ path:"user", component: UserComponent},
{ path:"password", component: PasswordComponent},
{ path:"profile", component: ProfileComponent}
]},
];
Define a <router-outlet> at root level as well as at child level. For child you can define it inside AccountComponent.html file.
You can follow something like this, that will help you in achieving what you require.
app.routing.ts
export const AppRoutes: Routes = [{
path: '',
component: PARENTcomponentName1,
children: [
{path: 'PATH1', loadChildren: 'MODULE_PATH'}
//more path
]},
{
path: '',
component: PARENTcomponentName2,
children: [
{path: 'PATH#', loadChildren: 'MODULE_PATH'},
]}}]
Heres my router config:
import { RouterConfig } from '#angular/router';
...
export const AppRoutes : RouterConfig = [
{
path: '',
redirectTo: 'myview',
pathMatch: 'full'
},
{
path: 'myview',
component: ViewComponent,
children: [{
path: 'hello',
component: HelloComponent
}]
},
];
When I try to load the page I get the following error:
EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''
However, when I make the child route a sibling, like this:
export const AppRoutes : RouterConfig = [
{
path: '',
redirectTo: 'myview',
pathMatch: 'full'
},
{
path: 'myview',
component: ViewComponent
},
{
path: 'hello',
component: HelloComponent
}
];
I am able to load the page fine without any errors. What am I doing wrong?
Because the way you have designed it is on initial load it is landing on ViewComponent component but ViewComponent has child so have to redirect to inner component.
You need to add one more route to children routes which will redirect '' to hello component.
export const AppRoutes: RouterConfig = [
{ path: '', redirectTo: 'myview', pathMatch: 'full'},
{ path: 'myview', component: ViewComponent,
children: [
{ path: '', pathMatch: 'full', redirectTo: 'hello' }, //added redirection to hello
{ path: 'hello', component: HelloComponent }
]
}
];
Note: Make sure you have <router-outlet></router-outlet> in myview component HTML so that child route view can be shown
correctly.
You are not using any route for '' in your RouterConfig.
As after redirect the new path will be https://yourdomain/myview/. And for this you have only created https://yourdomain/myview/hello route in routeCofig
I have created an app in angular 2. You can check the source here on Github.
Just add following line to your children path array:
{path: '', component: HelloComponent }
Check hero.routes.ts and dragon.routes.ts files they will help you understand routing more clearly. Hope it will help. Thank you.
I am trying to use two different Route Configs in one .ts file which is of the same level of route and same parent path based on a service variable value.
The clause is, if a value of a external setting variable is true it will use one list of child routes and if its another then it will use second list. The route path and level is the same.
Eg:
Parent route /parent... (non terminal route) then in the child route config if service.value is true then it will use the following route config
#RouteConfig([
{path: '/', component: ChildComponent, name: 'ChildCmp' },
{path: '/test', component: SecComponent, name: 'SecCmp' },
{path: '/tester', component: OptionalComponent, name: 'ThCmp' }
])
else if service.value is false it will use the following:
#RouteConfig([
{path: '/', component: ChildComponent, name: 'ChildCmp' },
{path: '/test', component: SecComponent, name: 'SecCmp' }
])
Is it possible to inject route config lists to the list or provide if statements based on service.value? Any ideas on how to achieve this modularity or selectability of route configs?
You can use Router#config which will let you to configure routes dynamically.
So it's as simple as follows
class Child {
config = [];
constructor(public svc: Service, router: Router) {
if(svc.value == 1) {
this.config = [
{path: '/', component: ChildComponent, name: 'ChildCmp' },
{path: '/test', component: SecComponent, name: 'SecCmp' },
{path: '/tester', component: OptionalComponent, name: 'ThCmp' }];
}
else if(svc.value == 2) {
this.config = [
{path: '/', component: ChildComponent, name: 'ChildCmp' },
{path: '/test', component: SecComponent, name: 'SecCmp' }
];
}
// Set the config
router.config(this.config);
}
}
Here's a plnkr with the example working. Toggle the value in the Service to see the values changing.