Develop Reference

Angular Router error redirecting to path with dynamic parameter

I want to redirect user to a path with a unique UUID when they hit root (localhost:4200).
But I get this error
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'document/4fdb309b-df59-4da8-a32d-5265f7925bba'
Error: Cannot match any routes. URL Segment: 'document/4fdb309b-df59-4da8-a32d-5265f7925bba'
Below is my router module code segment
import { v4 as uuidv4} from 'uuid'
const routes : Routes = [
{path : '', redirectTo : '/document/'+uuidv4(), pathMatch: 'full'},
{path : 'documents/:id', component: DocumentComponent}
]
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Not sure whats wrong!

Most probably it's due to route ordering. Try to rearrange the routes
const routes : Routes = [
{path : 'documents/:id', component: DocumentComponent},
{path : '', redirectTo : '/document/'+uuidv4(), pathMatch: 'full'}
]
Note that Angular Router uses first-match wins strategy and the ordering of the routes in the array does matter.

You can not declare dynamic route path. uuid4() will generate different uuid every time and you don't have those many components mapped to routes. you may want uuid as a route parameter as well. change first route to following and see if it helps.
{path : '', redirectTo : '/document/someComponent', pathMatch: 'full'},

Angular Routing child routes

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

Angular 9 : Children routing inside lazy loaded component not working

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.

Specifying a routerLink for a lazy loaded module component?

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 }}

Vue-Router Abstract Parent Routes

I am trying to migrate my current site to vuejs. The site map must be:
/login
/signup
/password-reset
/browse
/search
... dozens of other routes
As some of these routes share a lot of fx, I've made them the children of parent routes:
[{ // public routes
path: '/',
component: Auth,
children: [
{ path: '/login', component: Login },
{ path: '/signup', component: Signup },
{ path: '/password-reset', component: PasswordReset },
]
},
{ // routes behind Authentication
path: '/',
component: Home,
children: [
{ path: '/browse', component: Browse },
{ path: '/search', component: Search }
]
}]
The problem is obvious: The Auth and Home base components now are technically the same route path and I get routing errors. Since I will have a lot of routes sharing the same base component and fx, I'd like to have them be children of these abstract states.
Question 1: How can I implement these routes and their parent abstract states without conflict and without having to add all the wrapping logic to the children?
Question 2: How can I make it so the parent states () are not routeable or if they are, the default to a child state?

Whenever more than one route shares the same path, the first route in the array takes priority. So you need to put the Home route before the Auth route. That way, the / path will always match the Home route and not the Auth route. That also means that it is impossible to route directly to the Auth route, which is what you want.
If you do not want the Home route to be accessible, you can specify a redirect that should occur when it is matched exactly:
{
path: '/',
component: Home,
redirect: '/browse', // Redirect to path, or
redirect: { name: 'browse' }, // Redirect to named route
children: ...
}
If your Auth component has no auth-specific UI, you mightn't want to use "abstract" routes like this to enforce the authentication. There's plenty of information about how to achieve this in vue-router; here's one way:
// Routes
{
path: '/profile',
component: Profile,
meta: { auth: true },
}
// Router hooks
router.beforeEach((to, from, next) => {
if (to.matched.some(route => route.meta.auth) && !authenticated) {
next('/login');
} else {
next();
}
});