Developing Angular components with nested routes and navigation menu

I have a unique application structure with different modules:

/app
    /core
    /admin
    /authentication
    /wst

The admin module is quite complex, featuring a sidebar, while the authentication module is simple with just a login screen. I want to dynamically load the sidebar only when the admin module is active without including it in the app.component.html using *ngIf directive.

Is there a way to configure this setup effectively? I am currently working on Angular 7 and have set up a stackblitz example demonstrating the issue.

  • When I add router-outlet to app.component.html, routes like /login work perfectly.
  • However, when trying the same with /admin, nothing shows up.
angulartypescriptangular-routing

Answer №1

If you're looking to incorporate ProfileComponent into AdminComponent, the routing setup for AdminModule will need to follow this structure:

const routes: Routes = [
  {
    path: '', component: AdminComponent,
    children: [
      { path: 'profile', component: ProfileComponent }
    ]
  },
]

Prior to implementing this configuration, there are a couple of build errors that must be addressed:

  • Ensure that AdminRoutingModule is imported instead of RoutingModule within AdminModule.

  • Confirm that ProfileComponent is either declared or imported within AdminModule.

Upon successful resolution of these issues, accessing /admin/profile should render AdminComponent with both menu and profile components. If the desired URL is /admin, redirection rules can be added to the existing routes accordingly.

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

Troubleshooting: The canvas texture in Phaser 3's Update() function is not functioning

I've been attempting to transform this tutorial into Phaser 3: but have encountered an issue with the update() function not working. I also tried using the refresh() function, but that didn't solve the problem either. In my file a.ts, I have cre ...

typescriptrefreshupdatesphaser-framework

When utilizing useRef and useCallback in React, the output is visible in the console log but does not appear on the page

When working with API data, it's important to remember that the extraction process is asynchronous and the state may not be available at certain times. To handle this situation, we can utilize useCallback. However, even after successfully logging the ...

reactjstypescript

Strangely behaving data binding when using socket.io

Recently, I've been experiencing some strange behavior while developing a socket.io app with Angular 2 on the frontend. This unusual issue seems to be related to the interaction between Angular 2 and socket.io, as I have never encountered anything lik ...

angularjsnode.jssocketsangular

Angular ensures that the script is loaded only once

Here's a piece of code I wrote: ngOnInit() { this.loadScript('./assets/js/jquery.dataTables.min.js'); this.loadScript('./assets/js/datatable.js'); this.loadScript('./assets/js/common.js'); } Every time the page ...

angular

Facilitate the seamless interchangeability of Angular modules

Consider two feature modules named "sql-connector" and "nosql-connector" that can be brought into the root module: ... import { SqlConnectorModule } from './sql-connector/sql-connector.module'; @NgModule({ ... imports: [ ..., SqlConnectorMod ...

angular

How does the call method on array.prototype.includes work with arguments x and y?

Curious about the functionality of array.prototype.includes.call(x, y);. Discovered that includes() confirms if an array has the specified value and provides a true or false result. Learned that call() invokes this alongside any optional arguments. The ...

javascripttypescript

Showing the outcome of the request from the backend on an HTML page using the MEAN stack

I am currently in the process of developing an angular application with a node.js + express backend. After successfully retrieving the necessary data from MongoDB and being able to view it through terminal, I encountered a challenge when trying to display ...

node.jsangularmongodbtypescriptexpress

The successful conversion of Typescript to a number is no longer effective

Just the other day, I was successfully converting strings to numbers with no issues. However, today things have taken a turn for the worse. Even after committing my changes thinking all was well, I now find that when attempting to cast in different ways, I ...

angulartypescript

Ensure that column headers remain fixed when scrolling side to side

I'm trying to adjust the column headers so that I can scroll horizontally while keeping the headers visible. I've attempted the following changes but haven't been successful. In the screenshots provided, you can see that when I scroll up or ...

htmlcssangular

Issue with Typescript npm script including compilation and nodemon issue

After exploring various SO links, I tried to find a way to simultaneously run both tsc -w and nodemon app.js using a single command. The link I referred to is: How do I execute typescript watch and running server at the same time? Working on a node.js pr ...

node.jstypescriptnpmnodemontsc

Hold on for the next observable before moving forward

Whether or not I should include any code in this post is uncertain. However, I am willing to do so if necessary. I currently have an Angular2 directive called MyDirective and a service named MyService. The service performs an http call within its construc ...

angularrxjs

Troubleshooting: Resolving the Error "Cannot find Property htmlFor on Custom React Component"

I am currently working with a custom component that looks like this: import React from "react"; import classnames from 'classnames'; import { ButtonVariantColor } from '../types/button'; export type IconButtonProps = { e ...

javascriptreactjstypescript

Utilizing ES6 Promises in Mongoose with Typescript to Create a Seamless Chain

When attempting to chain ES6 promises with Mongoose 4.5.4, I encountered an error in Typescript. public static signup(req: express.Request, res: express.Response) { UserModel.findOne({ email: req.body.email }).exec() .then(existingUser => { ...

node.jsmongodbtypescriptmongoosees6-promise

Customizing HttpErrorResponse object properties in Angular

I am new to working with Angular (8) and have been developing a frontend SPA that interacts with a Node Express backend API through http calls using the HttpClient module. In the API response, I can define an Http response status along with an additional J ...

node.jsangularresponsehttp-error

Incorporating Moment.js into React Native Typescript for Enhanced Date and

I am currently facing an issue while using Moment.js and React Native to work with date and time. My code snippet below showcases how I am attempting to utilize the library. import * as React from 'react'; import { Text, View, StyleSheet } from ...

typescriptreact-nativemomentjs

Avoid displaying the value in Ant Design's autocomplete feature

Can someone assist me with clearing the auto complete placeholder or displaying only part of the label instead of the value after a user selects from a drop-down list? The current setup shows the unique ID as the value, which we want to keep hidden from en ...

reactjstypescriptantdant-design-pro

The BeanStub initialization failed due to a missing bean reference to frameworkOverrides

I recently updated my ag-grid version to 23.2.0 in my Angular 7 project. Everything was working fine, but when I tried filtering a page and then navigating away, I encountered the following error message: "unable to find bean reference frameworkOverrides ...

angularangular7ag-grid

What is the process for adding connected entities in MikroORM?

I am encountering difficulties in inserting related elements into each other. I believe I may be approaching it incorrectly. Here is an example of how I am attempting to do so. Mikro does not appear to set the foreign key in the dec_declinaison table. /* ...

typescriptormmikro-orm

Exploring Jasmine and Karma for testing Angular 5 HTTP requests and responses

I am brand new to the concept of Test-Driven Development (TDD) and I am currently in the process of debugging a complex Angular 5 application for the company I work for. The application is functioning without any issues, but now I need to incorporate test ...

javascriptangularjasminekarma-jasmine

Can multi-page applications be developed using Angular?

As I contemplate developing a food ordering application similar to Zomato, I have observed that Angular-like routing is used on certain pages, specifically during the ordering process after selecting a restaurant. Unlike other sections where server routing ...

angularspring-boot