N Things You Didn’t Know About the Router - Deborah Kurata
Why Stack Overflow recommends it
Stack Overflow users link it when answering Angular routing questions about nested or child router outlets, shell components for layouts like a login page versus a sidebar dashboard, and lazy loading.
Recommended by 6 people across 6 different months, 2018 to 2024.
What it is
A conference talk from ng-conf 2018 in which Deborah Kurata walks through lesser-known features of the Angular router, including child routes, nested router outlets, shell components and lazy-loaded feature modules.
What people said
Recommends yurzui · 2018-06 · Stack Overflow · on “Nested outlets in master layout outlet in angular 6”
I think you're on the right path. First you need to deal with eager routes and then you can switch to lazy modules. What you need to do: app.module.ts @NgModule({ imports: [ BrowserModule, AccountModule, LayoutModule, RouterModule.forRoot([ { path: '**', component: PageNotFoundComponent } ]) ], declarations: [ AppComponent, PageNotFoundComponent ], bootstrap: [AppComponent] }) export class AppModule { } layout.module.ts @NgModule({ imports: [ CommonModule, RouterModule.forChild([ { path: '', component: LayoutOutletComponent, children: [ { path: 'dashboard', loadChildren: () => DashboardModule }, { path: 'products', loadChildren: () => ProductsModule }, { path: '', redirectTo: '/dashboard', p
Recommends DaniS · 2018-06 · Stack Overflow · on “Angular 5 - router with two empty parent routes”
I cannot see any downside beside readability. Perhaps something I have learned from Deborah Kurata would be also an option. [this video] (from 2:47 till minute 5) Basically nesting two or multiple router-outlets.
Recommends Joseph Wu · 2018-06 · Stack Overflow · on “how to define angular 6 route for multiple level path”
agree with Chrillewoodz's solution. Also, it is good to put 'review' component and it's children into a feature module. In there you can define route file for this feature module. see official Angular document here [LINK] , and also Deborah Kurata's Angular router topic talk in this year's NgConf [this video]
Recommends DeborahK · 2018-07 · Stack Overflow · on “Child Routing for Angular 5 not working properly”
First, let's ensure we are on the same page regarding terminology. "Child" routes are nested routes. Something like this: [LINK] Notice that the app route's router outlet is the full screen. The shell component's router outlet is the area under the nav bar. The edit component's router outlet is the area under the tabs. Child routes are defined using the children property as you have in your route configuration shown in your question above. Child routes are different from named (also called auxiliary) routes. Aux routes are for routes that are side by side and not in a nested relationship. There are currently lots of bugs and issues with aux routes and I don't recommend them at this time. It
Recommends DeborahK · 2018-07 · Stack Overflow · on “Routes with multiple views”
Looks like you need a child router outlet: <div class="col-md-10"> <!-- here should be charge the child components --> <router-outlet></router-outlet> </div> Then any routes that go into that router outlet need to be children of the admin component. const routes: Routes = [ { path:'', component: HomeComponent }, { path:'login', component: LoginComponent }, { path:'administrator', component: AdministratorComponent, canActivate: [AuthGuard], children: [ { path: 'information', component: InformationComponent }, { path: 'operator', component: OperatorComponent }, { path: 'configuration-bill', component: ConfigurationBillComponent }, ] }, { path: 'error', component: ErrorComponent }, { path: 'hom
Recommends DeborahK · 2018-08 · Stack Overflow · on “Angular routing with multiple routes and router-outlet”
Do you really need a named router outlet? <router-outlet name="users"></router-outlet> Or could you just use a child router outlet: <router-outlet></router-outlet> I have a video about routing here that may help: [this video]
Recommends DeborahK · 2018-08 · Stack Overflow · on “Angular 6 nested template view”
Yes, you can have nested (or child) routes as shown above. In the picture, the shell router outlet is a child of the app router outlet. You can also have sibling router outlets. I have sample code here: [LINK] and a video about it here: [this video]
Recommends SiddAjmera · 2018-10 · Stack Overflow · on “Angular - Sidebar not to show in Login but to show in Dashboard - Angular Routing”
The best way to do this is to design a Shell Component(suggested by Deborah Kurata [LINK] in this ngConf talk [this video] ) which will house your View After the user logs in. The template of this Shell Component will house the Side Bar. The template of this Shell Component will also have a router-outlet for internal routing. So your Routes config will look something like this: const appRoutes: Routes = [ { path: '', component: ShellComponent, children: [ { path: 'dashboard', component: DashboardComponent }, ... { path: 'view', component: ViewPostComponent }, { path: '', component: PlaceholderComponent } ] }, { path: 'login', component: LoginComponent }, { path: '', redirectTo: '/login', pathMatc
Recommends DeborahK · 2019-02 · Stack Overflow · on “Trigger Module Lazy Load Manually Angular 7”
The Angular CLI bundler bundles up the modules based on two things: 1) If you have the modules set up for lazy loading ( loadChildren ), it will bundle the module up separately and provide it lazily. 2) HOWEVER, if there are any references to a lazy loaded module in any other module (by adding it to its imports array), it instead bundles the module with the referenced component. So what should be happening is that if your events module is referenced from a component, it should be bundled with that component. Do you have the module referenced in the imports array for the module containing the component that references it? What error are you getting exactly? BTW - I cover this in the "lazy loa
Recommends Mellville · 2020-07 · Stack Overflow · on “Global spinner not displaying with routing events”
I have this code on my app component HTML <mat-progress-spinner *ngIf="loading"></mat-progress-spinner> <router-outlet></router-outlet> And the TS export class AppComponent { loading: boolean; constructor(private router: Router) { this.router.events.subscribe((routerEvent: Event) => { this.checkRouterEvent(routerEvent) }) } checkRouterEvent(routerEvent: Event): void { if (routerEvent instanceof NavigationStart) { this.loading = true; console.log(this.loading) } if (routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationEnd || routerEvent instanceof NavigationError) { this.loading = false console.log(this.loading) } } } I learned this technique with video [this video] by Debor