Develop Reference

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

Angular 4 load child route in root outlet

I have a standard admin layout, where all main tabs are lazy loaded modules with separate state management. This is all wrapped in admin component with sidebar and router-outlet. One of my lazy-loaded admin tabs has a special component, which is supposed to open a full-screen preview of a product, occupying admin sidebar and navbar with it's own content.
My app router looks something like this:
export const appRoutes: Routes = [
/// ... some routes
{ path: 'admin', component: AdminComponent, canActivate: [SignedInGuard], children: [
/// ... some admin child routes
{ path: 'scrapers', loadChildren: '../scrapers/scrapers.module#ScrapersModule'}
/// ... some admin child routes
]}
/// ... some routes
]
And my scrapers module routes look like this:
export const scrapersRoutes: Routes = [
{ path: '', component: ScrapersListComponent },
{ path: 'single/:version', component: SingleScraperComponent, children: [
{ path: '', redirectTo: 'statistics', pathMatch: 'full' },
{ path: 'statistics', component: ScraperStatisticComponent },
{ path: 'targets', component: ScraperTargetsComponent },
]},
{ path: 'compare', component: CompareScrapersComponent },
{ path: 'preview', component: ScrapersPreviewComponent }
];
My goal is to open preview route of the scrapers module on the same outlet as admin.
My ideas for now:
a) overkill with html/css (very bad idea)
b) create a separate module for preview. Sounds resolute, but it hardly depends on scrapers lazy-loaded state, so I would not do this
c) load preview in a higher hierarchy outlet. If there is a valid way to do it, I would choose this.
Please, share your thoughts. Thanks!

Child routes in named outlet

i want make child routes in router outlet.
Is it possible to make it? I want to make modal window with changeable url and think make it with named outlet. I expect it will be like /(modal:auth)/step1.
For example i made plunker: https://plnkr.co/edit/vXvTHJF2KsCUkdvujzsn?p=preview
How i can open children greeting in auth component?
How will be right implement router?
export const authRoutes: Routes = [
{
path: 'auth',
component: AuthComponent,
outlet: 'modal',
children: [
{
path: 'greeting',
component: StepComponent,
outlet: 'modal'
}
]
}
];

vue-router won't render template on nested route

So I have a route like this:
const routes = [{
path: '/',
component: Home,
children: [
{
path: "/health"
children: [
{
path: 'overview'
component: Overview
},
{
path: 'blood',
component: Blood
}
]
}
]
}]
and in the Home component I have something like this:
<template>
<div id="home">
<router-view></router-view>
</div>
</template>
But when I navigate to the /health/overview and /health/blood routes, the templates corresponding to the components won't render. I checked the apps $route objects, they correctly detect the routes and the components. Just the template won't render. I also have a <router-view> in my App.vue if that helps.
Is it not possible to have multi nested routes? Or am I missing something?

The health route should be like this:
{
path: 'health', // not '/health'
component: Health, // this can just be a dummy component with a <router-view/>
children: [...],
},
If you don't need the Health component at all for any reason (i.e. you don't have any shared functionality or template across each child), you can just remove the health route completely and replace it with this instead:
{
path: 'health/overview',
component: Overview,
},
{
path: 'health/blood',
component: Blood,
},