I have the following components:
TodosComponent (path: './todos/'): with html content <p>TODO WORKS</p>
AddTodosComponent (path: './todos/add'): with html content <p>ADD TODO WORKS</p>
DeleteTodosComponent (path: './todos/delete'): with html content <p>DELETE TODO WORKS</p>
Add and Delete are nested routes in Todos.
In my main AppComponent I have a sidenav with links for the 3 components (TodosComponent, AddTodosComponent, DeleteTodosComponent).
I am trying to display in the content area of AppComponent the contents of the 3 components whenever one is clicked from the sidenav.
When I click the child routes I am receiving this error: Cannot match any routes. URL Segment: 'todos/add'
How can I display in sidenav-content from AppComponent the html from the components when a link is clicked in the sidenav?
app-routing.module.ts
const appRoutes: Routes = [
{ path: '', redirectTo: '/todos', pathMatch: 'full' },
{ path: 'todos', component: TodosComponent, pathMatch: 'full', children: [
{ path: 'add', component: AddTodoComponent},
{ path: 'delete', component: DeleteTodoComponent},
]},
]
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
app.component.html
<mat-sidenav-container>
<mat-sidenav opened="true" mode="side" fixedInViewport="true">
<p>I am the sidenav</p>
<mat-nav-list>
<mat-list-item>
<a matLine routerLink="/todos">List Todos</a>
</mat-list-item>
<mat-list-item>
<a matLine routerLink="/todos/add">Add Todo</a>
</mat-list-item>
<mat-list-item>
<a matLine routerLink="/todos/delete">Delete Todo</a>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
<p>Main Content</p>
</mat-sidenav-content>
</mat-sidenav-container>
What I want to achieve:
Excerpt from angular documentation
Technically, pathMatch = 'full' results in a route hit when the
remaining, unmatched segments of the URL match ''.
In your example, at the path todos, the remaining, unmatched part is /todos/add, which is not an exact match, and the router won't look the children inside that and skip to the next path (which you don't have any) and when none found, you get the error you are getting :)
Remove pathMatch: 'full' from /todos path and it should work:
const appRoutes: Routes = [
{ path: '', redirectTo: '/todos', pathMatch: 'full' },
{ path: 'todos', component: TodosComponent, children: [
{ path: 'add', component: AddTodoComponent},
{ path: 'delete', component: DeleteTodoComponent},
]},
]
Why we need children, as we are displaying all in the same router-outlet.
const appRoutes: Routes = [
{ path: '', redirectTo: '/todos', pathMatch: 'full' },
{ path: '/todos', component: TodosComponent },
{ path: '/todos/add', component: AddTodoComponent },
{ path: '/todos/delete', component: DeleteTodoComponent }
]
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 }
]
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'},
]}}]
Im trying to write routing for childs. The problem Im having is with path not beeing inserted in url bar of thhe browser properly. Below the code.
router.module
const routes: Routes = [
{path: 'menu', component: MenuComponent, canActivate: [AuthGuard],
children: [
{ path: 'upload', component: DrawingUploadComponent },
{ path: 'account', component: AccountComponent },
{ path: 'projects', component: ProjectListComponent }
]}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MenuRoutingModule {}
menu.component
<nav>
<a routerLink="/projects" routerLinkActive="active">Projects</a>
<a routerLink="/upload" routerLinkActive="active">Upload</a>
<a routerLink="/account" routerLinkActive="active">Account</a>
</nav>
MENU COMPONENT
<router-outlet></router-outlet>
the parent component:
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register', component: RegistrationComponent},
{path: "", redirectTo: "login", pathMatch: "full"},
{path: 'menu', component: MenuComponent, canActivate: [AuthGuard]}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
So the problem is when im under "/menu" the menu component is displayed, now when Im clicking on any link e.g
<a routerLink="/upload" routerLinkActive="active">Upload</a>
im getting console error
Cannot match any routes. URL Segment: 'upload'
Error: Cannot match any routes. URL Segment: 'upload'
but when i'd type the route by hand in browser bar "/menu/upload" I'm getting the proper result
When your route starts with /, that refers to the root of your app. You'll need to remove that, or else use the full path e.g. routerLink="/menu/upload".
I want to load aux route on the / URL but it does not work. For example, I want to load in my homepage the LoginComponent.
const routes : Routes = [
{
path: '',
pathMatch: 'full',
component: HomeComponent
},
{
path: 'login',
outlet: 'auth',
component: LoginComponent
}
];
<router-outlet></router-outlet>
<router-outlet name="auth"></router-outlet>
So now I am trying to access this URL and expecting to get the HomeComponent in the primary outlet and the LoginComponent in the auth outlet:
http://localhost:4200/(auth:login)
But it only loads the LoginComponent and not the HomeComponent.
You need to define redirect route:
const routes : Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'login',
outlet: 'auth',
component: LoginComponent
}
];
<a [routerLink]="[{ outlets: { 'auth': ['login'] } }]">Sign in</a>
Or:
http://localhost/home(auth:login)
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.