Some Tips For Angular Routing Issues

Augury - Rangle.io

This is a Chrome extension which gives us complete application information on our running application instance.

Below is the URL -

https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en

Let’s see some benefits of this extension.

Routing details

Component Tree and Service Injection levels

NgModules

List of all modules referred to in a Project.

Enable Tracing

This is very helpful when the application grows day by day and gets more complex with child routes and widgets. Because if any issue occurs within that application, it is very difficult to trace out and find the relationship within parent and child route modules.

With the help of route events, it becomes easy to understand which route is requested, processed, and completed.

Just one line of code is needed in the Router Module parameter.

@NgModule({
declarations: [
AppComponent, CP7Directive, CP8Directive, CP9Directive,
ListenDemoComponent, DebouneDemoComponent, LoadingDirectiveDirective, LoadingComponentComponent,
LoaderDirective, TestingLoaderComponent, RxjsDemoComponent
],
imports: [
BrowserModule, HttpClientModule, ReactiveFormsModule, RouterModule.forRoot([
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'debounce', component: DebouneDemoComponent },
{ path: 'rxjs', component: RxjsDemoComponent },
{ path: 'home', component: AppComponent }
], {enableTracing: true })
],
providers: [CounterService],
bootstrap: [AppComponent],
entryComponents : [LoadingComponentComponent]
})
export class AppModule { }

By adding this property, Angular will insert events fired during navigation from start to end and also, you can perform additional operations like adding loader within navigation start and stop.

Insert your custom logic in between these events. For example -

export class DebouneDemoComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
this.router.events
.subscribe((event) => {
if (event instanceof NavigationEnd) {
console.log('Testing Rajendra NavigationEnd:', event);
}
});
}
}

Console print -

Check out other properties as below.

export interface ExtraOptions {
/**
* Makes the router log all its internal events to the console.
*/
enableTracing?: boolean;
/**
* Enables the location strategy that uses the URL fragment instead of the history API.
*/
useHash?: boolean;
/**
* Disables the initial navigation.
*/
initialNavigation?: InitialNavigation;
/**
* A custom error handler.
*/
errorHandler?: ErrorHandler;
/**
* Configures a preloading strategy. See `PreloadAllModules`.
*/
preloadingStrategy?: any;
/**
* Define what the router should do if it receives a navigation request to the current URL.
* By default, the router will ignore this navigation. However, this prevents features such
* as a "refresh" button. Use this option to configure the behavior when navigating to the
* current URL. Default is 'ignore'.
*/
onSameUrlNavigation?: 'reload' | 'ignore';
/**
* Defines how the router merges params, data and resolved data from parent to child
* routes. Available options are:
*
* - `'emptyOnly'`, the default, only inherits parent params for path-less or component-less
* routes.
* - `'always'`, enables unconditional inheritance of parent params.
*/
paramsInheritanceStrategy?: 'emptyOnly' | 'always';
}

You can check out other properties as shown in the above screen. For example, useHash: true will append “# ” in the URL to stay on the same page whenever you refresh the page manually.

Router-outlet with name

Sometimes, we need multiple widgets on the same page as multiple sections in a page have their own functionality. In that case, we need to configure different <router-outlets> at the same level,

<div class="container">
<div class="row">
<div class="cols-md-6">
<router-outlet></router-outlet>
</div>
<div class="cols-md-6">
<router-outlet name="rightPanel"></router-outlet>
</div>
</div>
</div>

@NgModule({
declarations: [
AppComponent, CP7Directive, CP8Directive, CP9Directive,
ListenDemoComponent, DebouneDemoComponent, LoadingDirectiveDirective, LoadingComponentComponent,
LoaderDirective, TestingLoaderComponent, RxjsDemoComponent
],
imports: [
BrowserModule, HttpClientModule, ReactiveFormsModule, RouterModule.forRoot([
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'debounce', component: DebouneDemoComponent },
{ path: 'rxjs', component: RxjsDemoComponent , outlet: 'rightPanel' },
{ path: 'home', component: AppComponent }
], { enableTracing: true })
],
providers: [CounterService],
bootstrap: [AppComponent],
entryComponents : [LoadingComponentComponent]
})
export class AppModule { }

We can configure the routing as above.