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

Angular 5 - Reverting back to the previous state

In my Angular web application, I encounter a scenario where I need to navigate back to the previous state. Let's say I am currently on a page at http://localhost/someURL. On this particular page, users have the ability to search for items and see the ...

typescriptroutesangular5

Unable to generate Angular project using the command "ng new app_name" due to error code -4058

Whenever I try to run the command ng new app-name, I encounter error -4058. If I execute the same command while opening cmd as an administrator in the directory C:/Windows/system32, the project creation process goes smoothly. However, if I change the dire ...

node.jsangularnpmangular-cli

Angular4's integration with AngularFireAuth for Google authentication is causing users to be redirected back to the source page before they can successfully

Previously, this feature was functioning perfectly. However, the current issue is that the browser is redirecting to a long URL and then quickly returning to the original source URL. This prevents users from logging into their Google accounts. authentica ...

angularfirebase-authentication

Is it possible to toggle multiple menus programmatically at once?

In my template, I have 2 menu components set up like this: <button md-icon-button [md-menu-trigger-for]="menu"> <md-icon>more_vert</md-icon> </button> <md-menu #menu="mdMenu"> <button md-menu-item>Refresh</butt ...

angularangular2-material

React and MaterialUI Chrome Extension - Data did not populate in the table

Currently, I am in the process of developing a browser extension. My main challenge lies in displaying data within a table that has been created using MaterialUI and React. Despite not encountering any errors, everything else renders perfectly. The console ...

reactjstypescriptgoogle-chrome-extensionmaterial-ui

Using an external variable within an internal function in TypeScript

I am facing a situation where I have a variable outside of a function that needs to be updated, but I am unable to access it using "this" as it is not reachable at that point in the code. export class GamesDetailPage { details : any = {}; type : St ...

javascripttypescript

Angular - Dropdown menu fails to display options

I encountered an issue with the JSON response from my Angular-12 API endpoint: { "message": "vehicle Model Detail.", "error": false, "code": 200, "results": { "vehiclemakes": [{ ...

angulartypescriptangular12angular-ngselect

The Art of Validating Configurations Using io-ts

I have recently switched to using io-ts instead of runtypes in a fresh project. In terms of configuration validation, my approach involves creating an object that specifies the types for each part of the config; const configTypeMap = { jwtSecret: t.str ...

typescriptfp-ts

Can an attribute be assigned to an Angular host element without specifying a value?

Exploring the concept of host binding on the input element's readonly attribute, aiming to add the attribute without assigning any value. Even though HTML specifications state that assigning a value may not make a difference as long as the attribute i ...

angulartypescript

Is it possible to create my TypeORM entities in TypeScript even though my application is written in JavaScript?

While I find it easier to write typeorm entities in TypeScript format, my entire application is written in JavaScript. Even though both languages compile the same way, I'm wondering if this mixed approach could potentially lead to any issues. Thank yo ...

javascriptnode.jstypescriptarchitecturetypeorm

Issue with retrieving all phone numbers from a contact in Ionic

Hope you're doing well! I'm encountering an issue with Ionic Contacts. Currently, I'm able to retrieve all the contacts using my code but I need help extracting all the phone numbers associated with each contact. For example, if John has 3 ...

angulartypescriptionic-frameworknativecontacts

Most effective methods for validating API data

Currently, I am working on developing an api using nestjs. However, I am facing some confusion when it comes to data validation due to the plethora of options available. For instance, should I validate data at the route level using schema validation (like ...

typescriptapinestjs

Angular BehaviorSubject is failing to emit the next value

I am facing an issue with a service that uses a Behavior subject which is not triggering the next() function. Upon checking, I can see that the method is being called as the response is logged in the console. errorSubject = new BehaviorSubject<any> ...

javascriptangulartypescriptrxjsbehaviorsubject

TypeScript - Indexable Type

Here is an explanation of some interesting syntax examples: interface StringArray { [index: number]: string; } This code snippet defines a type called StringArray, specifying that when the array is indexed with a number, it will return a string. For e ...

javascripttypescriptduck-typing

Is it possible that a declaration file for module 'material-ui/styles/MuiThemeProvider' is missing?

I have been trying to implement the react material-ui theme after installing it via npm. However, I am encountering errors when adding 'import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";' in boot-client.tsx: TS7016: Could not ...

visual-studioreactjstypescriptnpmmaterial-ui

Angular intercepts HTTP requests

I am facing a challenge with an application that receives a JWT token from the backend, which has a validity of 15 minutes. The frontend then sends this JWT to the backend by appending it to the Authorization header using a HTTP interceptor. My goal is to ...

angularauthenticationjwtinterceptor

What is the best way to display just one record that has the lowest score out of all the records?

I need help with displaying only 1 record from the DL list that has the lowest score, instead of showing all records. In the example on stackblitz, you can see that for the first record, the DL scores are: 54, 20, and updated. Instead of displaying all 3 ...

javascriptarraysangulartypescriptfilter

Leveraging the Power of SASS Variables Across Your Entire NativeScript Application

Currently, I am in the process of developing an app using NativeScript 6.4.1 along with Angular 8. In order to enhance my styling capabilities, I have decided to incorporate SASS due to its advantageous features like variable names. My designer has suppli ...

cssangularsassnativescript

Storing Angular 4 Http Post response data in an object

I'm currently working with Angular 4 in conjunction with an Asp.net web API. I am facing difficulties in reading the properties of my response. This is how my response appears: https://i.stack.imgur.com/NDJCo.png Here is my post request: postLogi ...

angularangular-http

A TypeScript object with user-defined keys

I have a question about utilizing TypeScript records with a custom Type as keys. Essentially, I have a specific type (a limited set of strings) that I want to use as keys for my record. My goal is to start with an empty initialization of this record. type ...

typescript