The exploration of child routes and modules

I'm currently working on a somewhat large project and I've decided to break it down into modules. However, I'm facing an issue with accessing the routes of admin.module.ts. In my app.module, I have imported the admin Module.

imports: [
  BrowserModule,
  CommonModule,
  AppRoutingModule,
  FormsModule,
  ReactiveFormsModule,
  HttpModule,
  NgSelectModule,
  AdminModule,
  SharedModule
],

The routing module does not include the admin route in my admin.module.ts. The ngModule in admin.module appears as follows:

@NgModule({
  declarations: [
      AdminComponent,
      AdminLandingComponent
  ], imports: [
      CommonModule,
      AdminRoutingModule
  ]
})

The routes in the admin-routing.module.ts are structured like this:

{ path: 'admin', component: AdminComponent, children: [
  { path: '', component: AdminLandingComponent }
]}

Although I am using forChild(), when attempting to access localhost:4200/admin, I get redirected to a page not found error. What could be causing this issue and how can it be resolved?

Full Files

  1. Parent Module - app module
  2. Main Routes - app-routing module
  3. Submodule - admin module
  4. Child Routes - admin-routing module

Answer №1

@MaksymShevchenko Appreciate your help!
I resolved the issue by including the path:

{path: 'admin', loadChildren: '../admin/admin.module#AdminModule'}

in app-routing.module.ts and updating the path in admin-routing.modules.ts to:
{path: '', component: AdminComponent, children: [
        {path: '', component:AdminLandingComponent}
    ]}

and it worked like a charm.

Alternative solution to tackle the problem

Since I added the module in the imports array, Angular appends the routes after the wildcard route. A different approach is exporting the wildcard route to another module and placing it at the end of all other modules in the root module. This way avoids complicating things with lazy loading.

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

Tips for integrating assets such as icons into an Angular8 library

I've been attempting to integrate assets into an Angular 8 library. The library was initially created using ng generate library, and my objective is to incorporate SVG-format icons for use within the HTML component layouts. Up to this point, I have ...

What is the best way to eliminate existing double quotation marks within string values stored in objects in Angular?

When using Angular, data is retrieved in object form from the database to the backend and then to the frontend. Here's how it looks in HTML: <h3>Payslip for the month of {{dataout[0].MonthYear | json }}</h3> The issue arises when running ...

The Angular performance may be impacted by the constant recalculation of ngStyle when clicking on various input fields

I am facing a frustrating performance issue. Within my component, I have implemented ngStyle and I would rather not rewrite it. However, every time I interact with random input fields on the same page (even from another component), the ngStyle recalculate ...

Vue HeadlessUI Error: The function vue.defineComponent is not recognized

Trying to incorporate @headlessui/vue into my nuxt project has been a challenge. My attempt at using it looks like this: <template> <Menu> <MenuItems> <MenuItem>Item</MenuItem> </MenuItems> </Menu&g ...

Animations in Angular fail to operate within mat-tabs after switching back when custom components are being utilized

I am facing a similar issue as Olafvv with my angular 16 project. The problem occurs in a mat-tab-group where the :enter animations do not work when navigating away from a tab and then returning to it. However, in my case, the issue lies within a custom su ...

The parseFloat function only considers numbers before the decimal point and disregards

I need my function to properly format a number or string into a decimal number with X amount of digits after the decimal point. The issue I'm facing is that when I pass 3.0004 to my function, it returns 3. After reviewing the documentation, I realized ...

Is there a way to easily access the last element of an array in an Angular2 template without the need to iterate through the entire

I'm not trying to figure out how to access looping variables like i, first, last. Instead, my question is about how to retrieve and set variables as template variables. My current approach doesn't seem to be working... <div #lastElement="arr ...

Unable to extract the 'data' property from an undefined source in React, causing an error

I encountered this error message: TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined. export const getServerSideProps: GetServerSideProps = async () => { // categories const { data: categor ...

Issue encountered while importing TypeScript files from an external module in a Next.js project

Encountering an issue within my Next.js project with the following project structure: ├── modules/ │ └── auth/ │ ├── index.ts │ ├── page.tsx │ └── package.json └── nextjs-project/ ├─ ...

Exploring the world of Angular CLI testing and the versatility of

Struggling with integrating Angular CLI's test framework and enum types? When creating an enum like the following (found in someenum.ts): const enum SomeEnum { Val0, Val1 } Utilizing it in this way (in app.component.ts): private someEnum = Some ...

Angular2: PrimeNG - Error Retrieving Data (404 Not Found)

I'm facing an issue with using Dialog from the PrimeNG Module. The error message I keep getting is: Unhandled Promise rejection: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/primeng/primeng.js I followed the ...

Increase the size of the NativeScript switch component

Here is the code I am working with: .HTML <Switch style="margin-top: 10" (checkedChange)="onFirstChecked1($event)" row="0" col="1" horizontalAlignment="center" class="m-15 firstSwitchStyle"></Switch> .CSS .firstSwitchStyle{ width: 30%; ...

Issue with React TypeScript: Only the first state update takes effect, despite multiple updates being made

Check out this sandbox I created here. When you leave any of the form inputs blank, I should be seeing 3 errors but instead, I only get one. Can anyone explain why this is happening? import React, { ChangeEvent, useState } from 'react'; import { ...

Is there a method to make changes to files on a deployed Angular application without the need to rebuild?

After deploying my Angular application on a production environment using the command npm run build --prod --base -href, I now need to make changes to some static HTML and TypeScript files. However, since the app is already bundled and deployed, I'm un ...

Trouble viewing information on initial try

I am currently facing an issue with retrieving data from firestore. Initially, everything was working perfectly fine. However, I now need to incorporate a check to verify if the user is logged in. If the user is not logged in, they should be redirected to ...

The error message ``TypeError [ERR_UNKNOWN_FILE_EXTENSION]:`` indicates a

I am encountering an error while trying to run the command ./bitgo-express --port 3080 --env test --bind localhost: (node:367854) ExperimentalWarning: The ESM module loader is experimental. internal/process/esm_loader.js:90 internalBinding('errors ...

Utilize Material icons in CSS for a list in Angular 9

My task involves altering the HTML provided by a content management system for one of our applications. Specifically, I need to replace all "ul"s with <mat-icon>check_circle_outline</mat-icon> instead of the default "." The challenge lies in t ...

Limitations on quantity utilizing typescript

Looking to create a type/interface with generics that has two properties: interface Response<T> { status: number; data: T | undefined; } Specifically, I want to enforce a rule where if the status is not equal to 200, then data must be undefined. ...

Interacting with ngModel in Angular 4 across different components

I need to apply a filter on my products based on the categoryId value stored in the category-component. The product list is displayed in the product-component, and I have a categoryFilter pipe that filters the products accordingly. However, this pipe requi ...

TypeScript maintains the reference and preserves the equality of two objects

Retrieve the last element of an array, make changes to the object that received the value, but inadvertently modify the original last position as well, resulting in both objects being identical. const lunchVisit = plannedVisits[plannedVisits.length ...