Is it possible for an app's feature module to access routing configurations from another lazily loaded module in Angular routing?

The functionality of our App is divided into multiple feature modules that are lazily loaded. Each module is loaded under different path matches, and some modules import a shared module containing reusable components. Everything seems to be working well so far.

Now, we have encountered a situation where both module-A and module-B are using the same shared module with a component that emits outputs triggering routing navigation. Module-A wants to trigger a routing on a deeper nested path than what is configured for module-B. We can call the router navigate with the specific path to module-B to make everything function properly.

However, it feels strange to allow one domain (module-A) to have knowledge of the routing configuration details of another domain (module-B). Are there any suggestions on how to keep the routing configuration in module-B confidential so that module-A does not access the routing information from module-B?

Is this clear? I hope so, thank you! :)

angulartypescriptrouteslazy-loading

Answer №1

It seems like the ideal solution is to create a clear separation between module A and module B within the application. By avoiding direct communication between these modules, we can maintain better encapsulation and modularity.

One possible approach to this issue is implementing a system where general actions or events are dispatched, such as utilizing ngrx actions. These actions can then be handled at a higher level in the application structure, where routing is defined.

By following this strategy, module A would have no knowledge of module B, allowing for navigation to occur at a more abstract level.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different node types can utilize jsplumb to modify their edge paintstyles

Currently, I am utilizing jsPlumb within my Angular application to establish connections between various elements. In this scenario, I have three distinct node types: subservice, entryAssets, and exitAssets. My objective is to apply different connection st ...

angularjsplumb

Choose from the Angular enum options

I am working with an enum called LogLevel that looks like this: export enum LogLevel { DEBUG = 'DEBUG', INFO = 'INFO', WARNING = 'WARNING', ERROR = 'ERROR' } My goal is to create a dropdown select el ...

javascriptangulartypescript

Changing environment variables for jasmine tests

My Angular service code snippet includes importing the environment like this: import {environment} from '../environment' .... public something() { if(environment.production) { // do stuf } else { // do something else } } I am now l ...

javascriptangulartestingjasmine

The text "Hello ${name}" does not get substituted with the name parameter right away in the message string

I'm struggling to get the basic TypeScript feature to work properly. Everywhere I look on the Internet, it says that: var a = "Bob" var message = 'Hello ${a}' should result in a console.log(message) printing "Hello Bob". Howeve ...

angulartypescript

What is the best way to define a precise return type for a JSX Element?

Is it possible to define a function that returns a Button element and what would the correct return type of the function be? For example: Ex: const clickMeButton = (): Button => { return ( <Button> Click Me </Button& ...

reactjstypescriptmaterial-ui

How can a custom event bus from a separate account be incorporated into an event rule located in a different account within the CDK framework?

In account A, I have set up an event rule. In account B, I have a custom event bus that needs to act as the target for the event rule in account A. I found a helpful guide on Stack Overflow, but it was specific to CloudFormation. I am providing another a ...

typescriptamazon-web-servicesaws-cdkaws-event-bridge

How can one avoid the use of an opening curly bracket in Angular?

Is there a way to avoid the first opening curly brace shown below? <div> { <ng-container *ngFor="let x of [1,2,3,4]; let last=last"> {{x}} <ng-container *ngIf="!last">,</ng-conta ...

angular

Integrate worldwide sass into Angular 4 using webpack

I'm facing an issue with my Angular 4 project that uses webpack with HMR. Just to note, I am integrating it with ASP Core 2 using the angular template. My goal is to create a global/main SCSS file that will be applied to all components. I want this S ...

angularwebpacksass

Is it possible to dynamically generate a form using ngFor in Angular 4?

I'm attempting to generate an editable form dynamically using ngFor. Essentially, it's a data grid and I might use some other systems for this task--perhaps that's the route I should take, but I wanted to give this approach a try initially. ...

angularangular2-forms

How can I transfer user input to a service method in Angular?

My goal is to capture user input and pass that value into a service method to retrieve data related to the input and present it. (The getApplicantById method fetches data from the database in Postman.) Here's the code I've been working on: compon ...

angular

Angular unit tests do not trigger the QueryList.changes.subscribe() listener

I need to create popup containers based on the number of items received. The component works fine in dev and prod environments, but fails in unit tests because querylist.changes does not emit. As a workaround, I have to manually call querylist.notifyChange ...

angularkarma-jasmineopenlayers

What is the best way to secure routes with JWT authentication in NextJS?

I encountered an issue while developing a project in Next.js where I needed to secure certain routes using JWT. Despite my efforts, the POST method within index.js is somehow adding new entries to the database without going through the verify token middlew ...

apinext.jsroutes

What is the best way to eliminate duplicate data from an HTTP response before presenting it on the client side?

Seeking assistance on how to filter out duplicate data. Currently receiving the following response: {username:'patrick',userid:'3636363',position:'employee'} {username:'patrick',userid:'3636363',position:&a ...

angulartypescript

Using Ionic 4 and Angular 7 to make straightforward remote HTTP requests with Cross-Origin Resource

I'm still navigating my way through ionic and angular, trying to understand how to send a basic HTTP request to a remote server without dealing with CORS. My initial attempt involved the following code snippet: this.httpClient.get<MyObj>("/api" ...

angularcorsionic4

The issue with the overlay not being properly shown in the Angular Material menu

After following the instructions from here to connect the menu component, I noticed that the body of the menu is simply inserted into the document's body and does not resemble a modal window. https://i.stack.imgur.com/47wlj.png The dependencies list ...

angularmenuangular-materialoverlay

What is the best way to allow the browser to either download a file or open it in a new tab based on what is feasible? (while maintaining the actual file

Currently in my web application, which utilizes Angular for the front-end and .Net Core for the back-end, there is a page where users can click on server-side stored files. The desired behavior is for the file to open directly in a new tab if the browser a ...

angulartypescript.net-coredownloadasp.net-core-3.1

Exploring Angular: distinguishing between sessions on separate tabs

I am currently working on a web application that utilizes Angular for the front end and a Django Rest API for the back-end. In some cases, I need the Django Rest API to be able to distinguish between polling requests using session IDs. After conducting som ...

djangoangulardjango-rest-frameworkpollingsessionid

Eslint is unable to locate file paths when it comes to Solid.js tsx extensions

Whenever I attempt to import TSX components (without the extension), Eslint raises an error stating that it's unable to resolve the path: https://i.sstatic.net/NiJyU.png However, if I add the TSX extension, it then prompts me to remove it: https:// ...

typescripteslintsolid-js

What is the reason for user.id being set as a 'string' by default?

Currently, I am in the process of creating a Next Auth system using TypeScript, and I have encountered a type issue related to the 'user.id' data. This error is specifically happening in the callbacks section. The types of 'user.id' ar ...

reactjstypescriptnext.jsprismanext-auth

Tips on creating a hierarchical ul list from a one-dimensional array of objects

I have an array filled with various objects: const data = [ {id: "0"},{id: "1"},{id: "2"},{id: "00"},{id: "01"},{id: "02"},{id: "11"},{id: "20"},{id: "23"},{id: & ...

javascriptreactjstypescriptreact-typescript