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

Angular Routing Issues
Component Tree and Service Injection levels
Angular Routing Issues
NgModules
List of all modules referred to in a Project.
Angular Routing Issues
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.
  1. @NgModule({
  2. declarations: [
  3. AppComponent, CP7Directive, CP8Directive, CP9Directive,
  4. ListenDemoComponent, DebouneDemoComponent, LoadingDirectiveDirective, LoadingComponentComponent,
  5. LoaderDirective, TestingLoaderComponent, RxjsDemoComponent
  6. ],
  7. imports: [
  8. BrowserModule, HttpClientModule, ReactiveFormsModule, RouterModule.forRoot([
  9. { path: '', redirectTo: '/home', pathMatch: 'full' },
  10. { path: 'debounce', component: DebouneDemoComponent },
  11. { path: 'rxjs', component: RxjsDemoComponent },
  12. { path: 'home', component: AppComponent }
  13. ], {enableTracing: true })
  14. ],
  15. providers: [CounterService],
  16. bootstrap: [AppComponent],
  17. entryComponents : [LoadingComponentComponent]
  18. })
  19. 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 -

  1. export class DebouneDemoComponent implements OnInit {
  3. constructor(private router: Router) { }
  5. ngOnInit() {
  6. this.router.events
  7. .subscribe((event) => {
  8. if (event instanceof NavigationEnd) {
  9. console.log('Testing Rajendra NavigationEnd:', event);
  10. }
  11. });
  12. }
  13. }

Console print -

Angular Routing Issues
Check out other properties as below.
  1. export interface ExtraOptions {
  2. /**
  3. * Makes the router log all its internal events to the console.
  4. */
  5. enableTracing?: boolean;
  6. /**
  7. * Enables the location strategy that uses the URL fragment instead of the history API.
  8. */
  9. useHash?: boolean;
  10. /**
  11. * Disables the initial navigation.
  12. */
  13. initialNavigation?: InitialNavigation;
  14. /**
  15. * A custom error handler.
  16. */
  17. errorHandler?: ErrorHandler;
  18. /**
  19. * Configures a preloading strategy. See `PreloadAllModules`.
  20. */
  21. preloadingStrategy?: any;
  22. /**
  23. * Define what the router should do if it receives a navigation request to the current URL.
  24. * By default, the router will ignore this navigation. However, this prevents features such
  25. * as a "refresh" button. Use this option to configure the behavior when navigating to the
  26. * current URL. Default is 'ignore'.
  27. */
  28. onSameUrlNavigation?: 'reload' | 'ignore';
  29. /**
  30. * Defines how the router merges params, data and resolved data from parent to child
  31. * routes. Available options are:
  32. *
  33. * - `'emptyOnly'`, the default, only inherits parent params for path-less or component-less
  34. * routes.
  35. * - `'always'`, enables unconditional inheritance of parent params.
  36. */
  37. paramsInheritanceStrategy?: 'emptyOnly' | 'always';
  38. }

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,

  1. <div class="container">
  2. <div class="row">
  3. <div class="cols-md-6">
  4. <router-outlet></router-outlet>
  5. </div>
  6. <div class="cols-md-6">
  7. <router-outlet name="rightPanel"></router-outlet>
  8. </div>
  9. </div>
  10. </div>
  1. @NgModule({
  2. declarations: [
  3. AppComponent, CP7Directive, CP8Directive, CP9Directive,
  4. ListenDemoComponent, DebouneDemoComponent, LoadingDirectiveDirective, LoadingComponentComponent,
  5. LoaderDirective, TestingLoaderComponent, RxjsDemoComponent
  6. ],
  7. imports: [
  8. BrowserModule, HttpClientModule, ReactiveFormsModule, RouterModule.forRoot([
  9. { path: '', redirectTo: '/home', pathMatch: 'full' },
  10. { path: 'debounce', component: DebouneDemoComponent },
  11. { path: 'rxjs', component: RxjsDemoComponent , outlet: 'rightPanel' },
  12. { path: 'home', component: AppComponent }
  13. ], { enableTracing: true })
  14. ],
  15. providers: [CounterService],
  16. bootstrap: [AppComponent],
  17. entryComponents : [LoadingComponentComponent]
  18. })
  19. export class AppModule { }
We can configure the routing as above.