Enable lazy loading to retrieve the current routed module

Question

Enable lazy loading to retrieve the current routed module

I'm currently working on a way to exclude a component when a specific module is routed in a lazy loading application.

For instance, in my AppComponent I have a router-outlet and a component above it:

<div>
    <my-component></my-component>   --> don't show if module is StartModule
    <router-outlet></router-outlet>
</div>

This is how my routing configuration is set up:

export const routes: Routes = [
  {
    path: 'start',
    loadChildren: './start/start.module#StartModule',
  },
  {
    path: 'first',
    loadChildren: './first/first.module#FirstModule'
  },
  {
    path: 'second',
    loadChildren: './second/second.module#SecondModule'
  }
];

Is there a way to retrieve the routed module so that I can perform a check like this:

isStartModule(): boolean {
    if (routedModule == StartModule) {
        return true; 
    }
}

<my-component *ngIf="!isStartModule()"></my-component>

?

angular typescript lazy-loading

Answer 1

Answer №1

constructor(private router: Router ) {}

Check if the current URL is '/start' and then take some action.

You have the option to subscribe to events:

 this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd))
    .subscribe(x => {
        console.log('THIS IS FOR TEST', x['url']);
        }
    );

Answer 2

constructor(private router: Router ) {}

Check if the current URL is '/start' and then take some action.

You have the option to subscribe to events:

 this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd))
    .subscribe(x => {
        console.log('THIS IS FOR TEST', x['url']);
        }
    );

Answer 3

Answer №2

To add a route change listener in your app-component, follow these steps:

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router)
{
  router.events.pipe(
  filter(event => event instanceof NavigationEnd) ).subscribe((event: NavigationEnd) => {    
    console.log(event.url);
    if(event.url == 'start'){
    // run specific code
    }
});}

Answer 4

To add a route change listener in your app-component, follow these steps:

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router)
{
  router.events.pipe(
  filter(event => event instanceof NavigationEnd) ).subscribe((event: NavigationEnd) => {    
    console.log(event.url);
    if(event.url == 'start'){
    // run specific code
    }
});}

Enable lazy loading to retrieve the current routed module

Answer №1

Answer №2

Similar questions

The jquery ui slider in Angular is not triggering the function when changes are made to the slider

How can I utilize a variable to define the key for the template HTML property in Angular 7?

When a module with routes is imported into another module with lazy-loading, the routing system becomes disrupted

The binding properties of ngIf and hidden do not work properly when the condition is passed from typescript

Specify the correct type for the SVG component when passing it as a prop

Learn the process of presenting data in an HTML file using TypeScript within AngularJS 8

Looking to verify the functionality of the router.navigate method when employing relativeTo?

Challenges with inferring return values in Typescript generics

Learn how to import from a .storybook.ts file in Vue with TypeScript and Storybook, including how to manage Webpack configurations

The call to 'setRequestHeader' on 'XMLHttpRequest' was unsuccessful due to the object's state not being OPENED

When you use map to transform the value, Observable will consistently return as undefined

What are the reasons behind the inability to implement an Angular custom pipe in a component?

Implementing a 12-month display using material-ui components

Unable to display Google Places place_id when submitting a form in Angular/Ionic

Connecting to Asp.Net Core 6 Signal-R Takes an Unusually Long Time of 4 Minutes

Navigating with Angular: How to pass route parameters within the same component?

Leveraging the power of TypeScript and Firebase with async/await for executing multiple

Generating form groups programmaticallyORDynamically

Using TypeScript, let's take a closer look at an example of Angular

The array within the JSON object holds vital information [Typescript]