I have pretty weird question about routing. That's my code so far:
app.component.html
<router-outlet></router-outlet>
Main routing module
const routes: Routes = [
{ path: "", component: LogOnComponent },
{ path: "groups", loadChildren: () => import ('./groups/groups.module').then(m => m.GroupsModule), canActivate: [AuthGuard]},
];
Child routing in Groups.module
const routes: Routes = [
{ path: '', component: MenuComponent, children: [
{ path: '', component: GroupsComponent, outlet: 'start-outlet' },
{ path: 'permissions', component: PermissionsComponent, outlet: 'start-outlet' }
]
},
];
And Menu.component has a line with child routing
<router-outlet name="start-outlet"></router-outlet>
And in Groups.component i want to redirect user to groups/permission like said in groups routing.
<a [routerLink]="['permissions']" [state]="{ groupId: content.data.groupId }">link</a>
The problem is redirection doesn't work. Angular said that he can't find this route
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'groups/permissions' Error: Cannot match any routes. URL Segment: 'groups/permissions'
What am I doing wrong ? Tried different placement of permissions but none seems to work. Any ideas of my mistakes ?
I created a StackBlitz code sample. Here it is :
https://stackblitz.com/edit/angular-ivy-fxcqoy?file=src/app/menu/menu/menu.component.html
Related
I have app component in which i lazy load create-new-module with component profilecomponent. now in profile component i hit router.navigate and trying to load another children detail in place of profile but its not working also no error in console.
please help
// App component route
const routes: Routes = [
{
path: 'create-new-emp',
loadChildren: () => import('./create-new-emp/create-new-emp.module').then(c => c.CreateNewEmpModule),
},
{ path: '', redirectTo: 'create-new-emp', pathMatch: 'full'},
{ path: '**', redirectTo: 'create-new-emp'}
];
// Emp Module Route
const routes: Routes = [
{ path: '', component: ContainerComponent,
children: [
{ path: '', component: ProfileComponent, outlet: 'form'},
{ path: 'profile', component: ProfileComponent, outlet: 'form'},
{ path: 'detail', component: DetailComponent, outlet: 'form' }] }
];
// Trying to hit below link but not working
this.router.navigate(['detail'])
<app-component>
<router-outlet>
<container-component>
<profile-component></profile-component>
</container-component>
</router-outlet>
</app-component>
Complicated with only these information to help. But is the way angular navigates amount components/pages. I think what you are trying to do is navigate between components (according your router.ts). If you want to navigate, you only need router-outlet in your html code and not use component tag in the HTML code.
Change this:
<app-component>
<router-outlet>
<container-component>
<profile-component></profile-component>
</container-component>
</router-outlet>
</app-component>
To this:
<app-component>
<router-outlet>
</router-outlet>
</app-component>
Then, into ContainerComponent.html you need to repeat to navigate to details o profile because these are child routes.
<router-outlet></router-outlet>
That will give you more information about what you need.
Its hard to say with this info, but may... you should define de router outlet name
<router-outlet name="form"></router-outlet>
Hope it's help.
I have a problem with my angular 8 app, not rendering into a named router-outlet.
The routes are:
routes.module:
const routes: Routes = [
...
{
path: 'settings', loadChildren: './settings/settings.module#SettingsModule', canActivate
},
]
settings.module
RouterModule.forChild([
{
path: '', component: SettingsComponent
},
{
path: 'profile', component: ProfileComponent, outlet: 'settings_o'
},
{
path: 'users', component: UsersComponent, outlet: 'settings_o'
}
])
settings.component.html
<nav mat-tab-nav-bar color="primary" class="bg-whitesmoke primary">
<span mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="[{outlets: {settings_o: [link.link]}}]"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
</span>
</nav>
<router-outlet name="settings_o"></router-outlet>
When I click a link, the url in the address bar changes (e.g. to http://localhost:4200/settings/(settings_o:profile)), but no content is rendered to settings_o, nor do the components get loaded. There is no error in the console.
link.link is, for example simply profile like in settings.module's routes.
What do I need to change?
This is a known bug which has been discussed a lot: https://github.com/angular/angular/issues/10981
As far as I know it hasn't been solved completely but there are workarounds: https://github.com/angular/angular/issues/10981#issuecomment-454425220
You should give the lazy loaded module a default route and define the child routes for the components that you would like to open in the named outlet, for example:
RouterModule.forChild([
{
path: "default",
component: SettingsComponent,
children: [
{ path: "profile", component: ProfileComponent,outlet: "settings_o" },
{ path: "users", component: UsersComponent, outlet: "settings_o" }
]
}
]);
Of course you have to change the navigation to the SettingsComponent accordingly: routerLink='/settings/default'
I made a Stackblitz which is not an exact copy of your code but which shows how it can be solved: https://stackblitz.com/edit/angular-nctjpv
By the way, in your original solution, if you placed the named router outlet in the root component, I think it would display the child component but in the wrong place.
In this demo app I have the following route in the lazy loaded books module:
{ path: 'collection', component: CollectionPageComponent },
And in the search component the following router link:
<a routerLink="collection">Collections</a>
When hovering over the link it displays the path books/collection. However when clicking it it routes to the 404 page. Thoughts?
https://stackblitz.com/edit/angular-temp-slice-demo-phase2?file=src%2Fapp%2Fbooks%2Findex.ts
The route
{ path: ':id', component: ViewBookComponent, resolve: { book: BookResolverService }}
is consuming your string collection as input to id.
To resolve this,
Put specific routes to the top i.e.
{ path: 'collection', component: CollectionPageComponent },
{ path: ':id', component: ViewBookComponent, resolve: { book: BookResolverService }}
My angular2 app has this routes configuration
export const AppRoutes: Routes = [
{ path: 'SignIn', component: LoginComponent },
{
path: 'Home', component: HomeComponent, canActivate: [LoggedInGuard]
, children: [
{ path: 'ViewUserDetails/:pageTitle', component: ViewUserDetailsComponent },
]
}];
I wanted to use the pageTitle parameter in my component so I passed it in the routerLink this way
<a [routerLink]="['/Home/ViewUserDetails',{pageTitle:'View Channel User'}]">View Channel User</a>
But I get this error
core.umd.js:3257 EXCEPTION: Uncaught (in promise): Error: Cannot match
any routes. URL Segment:
'Home/ViewUserDetails;pageTitle=View%20Channel%20User'
The angular documentation used this to pass parameters I don't understand why it produces this form of the link instead of
/Home/ViewUserDetails/View%20Channel%20User
Angular 2 router does work on URL fragment base. It navigates between route based on URL pattern.
You should be having just array of expression(here its string).
<a [routerLink]="['/Home/ViewUserDetails','View Channel User']">View Channel User</a>
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.