Angular function that returns a ModuleWithProviders and takes parameters into account

Question

Angular function that returns a ModuleWithProviders and takes parameters into account

I am working on an application that consists of various components, each defining its own subset of route states. Depending on the context in which these components are used, a parent state needs to be provided under which some component states should be nested.

For example, here are the component states:

[{
  name: 'component',
  url: '/component',
  component: ComponentRootComponent,
  abstract: true,
  default: '.list'
}, {
  name: 'component.list',
  url: '',
  component: ComponentListComponent
},...]

In one specific section module of the app:

@NgModule({
  declarations: ...,
  imports: [
    UIRouterModule.forChild({ states: SECTION_STATES }),

    SomeComponentModule,
    UIRouterModule.forChild({
      states: RouterUtil.setParentState(SECTION_STATES[0].name, SOME_COMPONENT_STATES)
    })
  ]
})
export class AppSectionModule {}

The setParentState() function prefixes component states with the parent state name, ensuring they fall under that specific route state.

Instead of manually importing modules for each component, I want to create a single and configurable import function per component within my modules.

@NgModule({
  declarations: ...,
  imports: [
    UIRouterModule.forChild({ states: SECTION_STATES }),
    SomeComponentModule.importFor(SECTION_STATES[0].name)        
  ]
})
export class AppSectionModule {}

The importFor function should return a ModuleWithProviders type, wrapping the original component module and defining component routing under a specific parent route:

export class SomeComponentModule {
  public static importFor(parentState: string): ModuleWithProviders {
    return {
      ngModule: SomeComponentModule,
      providers: [
        // What should I do here?
      ]
    };
  }
}

How can I implement this function effectively? How do I incorporate UIRuterModule.forChild(...) within this function? These are the challenges I am currently faced with resolving.

angular typescript angular5

Answer 1

Answer №1

To achieve this, you can utilize a "hidden" module.

The initial module contains a forRoot() method or in your scenario an importFor(), which references a hidden module.

When importFor is called, it invokes this hidden module, importing the original module and exporting it to maintain its hidden appearance.

This approach allows for the creation of reusable modules that can easily be integrated into projects with pre-configured reducers, effects, routes, and more :)

@NgModule({
  imports: [
    SharedModule,
  ],
  declarations: [
    ...SHARED_COMPONENTS,
  ],
  exports: [
    ...SHARED_COMPONENTS,
  ]
})
export class SecurityModule {

  // By importing SecurityModule.forRoot() in the app module, we actually import RootSecurityModule
  // This setup creates the IsAuthenticated guard and includes all feature elements like reducers, effects, and routes

  // To access shared components from SecurityModule later on, simply import the module without using forRoot()
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: RootSecurityModule, 
      providers: [
        IsAuthenticatedGuard,
      ],
    };
  }
}

@NgModule({
  imports: [

    // Import the above module to gain access to shared declarations
    SecurityModule,

    // Include the necessary security modules only once
    StoreModule.forFeature('security', securityReducer),
    EffectsModule.forFeature([
      SecurityEffects
    ]),
    SecurityRoutingModule,
  ],

  // Exporting SecurityModule is crucial for maintaining consistency when using SecurityModule.forRoot()
  exports: [
    SecurityModule,
  ]
})
export class RootSecurityModule {}

Answer 2

To achieve this, you can utilize a "hidden" module.

The initial module contains a forRoot() method or in your scenario an importFor(), which references a hidden module.

When importFor is called, it invokes this hidden module, importing the original module and exporting it to maintain its hidden appearance.

This approach allows for the creation of reusable modules that can easily be integrated into projects with pre-configured reducers, effects, routes, and more :)

@NgModule({
  imports: [
    SharedModule,
  ],
  declarations: [
    ...SHARED_COMPONENTS,
  ],
  exports: [
    ...SHARED_COMPONENTS,
  ]
})
export class SecurityModule {

  // By importing SecurityModule.forRoot() in the app module, we actually import RootSecurityModule
  // This setup creates the IsAuthenticated guard and includes all feature elements like reducers, effects, and routes

  // To access shared components from SecurityModule later on, simply import the module without using forRoot()
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: RootSecurityModule, 
      providers: [
        IsAuthenticatedGuard,
      ],
    };
  }
}

@NgModule({
  imports: [

    // Import the above module to gain access to shared declarations
    SecurityModule,

    // Include the necessary security modules only once
    StoreModule.forFeature('security', securityReducer),
    EffectsModule.forFeature([
      SecurityEffects
    ]),
    SecurityRoutingModule,
  ],

  // Exporting SecurityModule is crucial for maintaining consistency when using SecurityModule.forRoot()
  exports: [
    SecurityModule,
  ]
})
export class RootSecurityModule {}

Answer 3

Answer №2

After examining the functionality of UIRouterModule, it appears to be functioning correctly according to expectations:

export class CustomComponentModule {
  public static initializeCustomState(parentState: string): ModuleWithProviders {
    return {
      ngModule: CustomComponentModule,
      providers: UIRouterModule.forChild({ states: RouterUtil.setParentState(parentState, CUSTOM_COMPONENT_STATES) }).providers
    };
  }
}

Now it is feasible to import the component module and configure its route states as demonstrated in the example below:

@NgModule({
  declarations: ...,
  imports: [
    UIRouterModule.forChild({ states: SECTION_STATES }),
    CustomComponentModule.initializeCustomState(SECTION_STATES[0].name)        
  ]
})
export class SectionModule {}

Answer 4

After examining the functionality of UIRouterModule, it appears to be functioning correctly according to expectations:

export class CustomComponentModule {
  public static initializeCustomState(parentState: string): ModuleWithProviders {
    return {
      ngModule: CustomComponentModule,
      providers: UIRouterModule.forChild({ states: RouterUtil.setParentState(parentState, CUSTOM_COMPONENT_STATES) }).providers
    };
  }
}

Now it is feasible to import the component module and configure its route states as demonstrated in the example below:

@NgModule({
  declarations: ...,
  imports: [
    UIRouterModule.forChild({ states: SECTION_STATES }),
    CustomComponentModule.initializeCustomState(SECTION_STATES[0].name)        
  ]
})
export class SectionModule {}

Angular function that returns a ModuleWithProviders and takes parameters into account

Answer №1

Answer №2

Similar questions

Can Node.js version 11 support node-sass in Angular projects?

Tips for retrieving the angular route parameters from the URL?

Is it possible to access 'import.meta' only within a module in an Angular micro front-end setup?

Using TypeScript to Load JSON Data from a Folder

Showing container element only if certain condition is met but display the children in Angular 2+

Utilizing the map function to incorporate numerous elements into the state

Steps for adding Node modules to a Nexus private repository

"Unveiling the Intricacies of DOM Event Subscriptions with *ngIf

Storing user information in local storage with the Capacitor Storage Plugin: A Comprehensive Guide

Retrieve the parent injector passed to the component during testing

Is there a way to customize the slicing of *ngFor in a component according to the components it is being injected into?

The Generic Function's Return Type in Typescript

Restricting the number of mat-chips in Angular and preventing the input from being disabled

The proxy configuration resulted in a 404 error

What's the best way to ensure you're linting the correct file type for importing in Web

Tips for Ensuring the Observable Completes Before Subscribing

The MaxDuration feature for a 5-minute time limit is malfunctioning on the Serverless Pro Plan, resulting in a 504 ERROR on

HTTP POST request is being blocked due to cross-origin request

Angular2 Interactive Modal Pop Up

Angular 4/2: Exploring the Concept of Method Overloading