The primary route module is automatically loaded alongside all other modules

I have configured my lazy loaded Home module to have an empty path. However, the issue I am facing is that whenever I try to load different modules such as login using its URL like /new/auth, the home module also gets loaded along with it.

const routes: Routes = [
  {
    path: '', component: MainLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: './homepage/homepage.module#HomepageModule'
      },
      {
        path: 'new/auth',
        loadChildren: './auth/auth.module#AuthModule'
      },
    }
 }

Even though I made my home page module lazy loaded, I expect it to only load on the empty path. But it is loading with every route.

I have checked extensively in my app module and other root modules, and there is no import of the home module present.

Answer №1

The arrangement of the elements in the children array is crucial.

Give this a shot:

const navigation: Routes = [
  {
    path: '', component: MainLayoutComponent,
    children: [
     {
        path: 'new/login',
        loadChildren: './login/login.module#LoginModule'
      },
      {
        path: '',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
      },
    }
 ]

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

Integrating router-outlet into Angular 2 component affects ngModel functionality

Currently, I am experimenting with angular 2 beta 9 and have encountered an issue that I would like some help with. In my component, I have bound an input field using the following code: [(ngModel)]="email" (ngModelChange)="changedExtraHandler($event)" ...

Switching to Next.js

In my Next JS application, I have a div that dynamically displays the currency and price of a product when a user visits a product page. <div className="flex"> <Image src={EuroCurrency} alt="Euro Sign} /> <h1 className=" ...

Updating the page dynamically in React/Redux by making API calls based on user submissions

My current task involves calling an API with Redux, triggering the call based on a form submission. If the query is empty, it should return all lists; otherwise, it should only return lists that match the query. // List.tsx import React, { useEffect, useS ...

Steps for ensuring a prop is required in TypeScript React based on a condition

interface IPerson { name: string; gender: string; vaccinated: 'yes'|'no'; vaccineName?: string } In this interface, the property vaccineName is optional while other properties are required. If the property vaccinated is yes ...

Why can't we import Angular 4 as a library similar to AngularJS?

Why was AngularJS introduced as a script to import in an HTML page? However, in the newer version Angular 4, we need to use a web server to launch the application? Is it because AngularJS is not considered a framework but Angular 4 is? Thank you. ...

Instructions for setting up qtip2 tooltip with npm in an Angular 2 project

Struggling to integrate qtip2 into my Angular 2 app, encountering errors like this After extensive Google searches, I could not find a definitive solution for installing the qtip2 JQuery plugin via npm to enable tooltips. Even after updating JQuery to ve ...

Encountering difficulties importing a component from a library into my Nx Expo React Native application

Having an issue with my Nx monorepo which contains an Expo React Native app and various libraries. The problem arises when trying to import a component from a library within the application, resulting in Error: Cannot resolve @monorepo/account-manager Wi ...

Angular 2: Capturing scroll events from the parent element within a Directive

One of the challenges I encountered is with a directive called [appInvalidField] that functions like a custom tooltip for validation purposes. To ensure it appears above everything else within dialogs, I attach it to the body and position it near the relev ...

Setting null for HttpParams during the call

I am encountering an issue with HttpParams and HttpHeaders after upgrading my project from Angular 7 to Angular 8. The problem arises when I make a call to the API, as the parameters are not being added. Any assistance in resolving this matter would be gre ...

Display a single unique value in the dropdown menu when there are duplicate options

Hey there, I'm currently working on retrieving printer information based on their location. If I have multiple printers at the same location, I would like to only display that location once in the dropdown menu. I am aware that this can be resolved at ...

Having an issue in Angular 2 where the correct function is not triggered when a button is placed within a selectable anchor

Within an anchor element, I have a button that triggers its own click listener for an editing popup module. The anchor itself has another click listener assigned to it. For example: <a (click)="onClick(myId)" class="list-group-item clearfix"> < ...

Can a function utilize a Generic-specified type property?

function extractStringValue<T extends object, S extends keyof PickByValue<T, string>>( obj: T, key: S ): string { return obj[key]; }; The PickByValue function extracts properties of object T with values of type string. type CustomType = ...

Looking for a sublime plugin that will enhance your angular view template?

When using Sublime Text with Angular (2/4), everything works great until I'm working in the view template file. The interpolation doesn't offer auto-completion for class properties that support the view, unlike what I've seen in VS Code. Ar ...

Determine the character count of the text within an *ngFor loop

I am a beginner in Angular (8) and I am trying to determine the length of the input value that I have created using a *ngFor loop as shown below: <div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id"> & ...

Updating the data type of the Request object following the execution of the checkAuth middleware in Types

I'm relatively new to TypeScript and recently encountered an issue with extending the Request type. Although I managed to find a workaround, it doesn't sit well with me and I believe there may be a more optimal solution out there. Let's del ...

Error in Typescript: Array containing numbers is missing index property `0`

This is the code for my class: class Point{ coordinates: [number, number, number]; constructor(coordinates: [string, string, string]) { this.coordinates = coordinates.map((coordinate) => { return Math.round(parseFloat(coordinate) *100)/ ...

The tooltip is obscured by the table row

I'm having trouble with a simple CSS fix and can't seem to figure out why. The z-index and overflow visibility properties are not working as expected. I just need 'In Progress' to be displayed above everything else. Some things I' ...

Updating the value of an input field in Angular 2

When I enter 123 in my input field and submit, I want to see 456. Is there a way to change the value of an input programmatically? Here is my HTML code using Ionic2: <ion-textarea [ngFormControl]="message"></ion-textarea> This is the JavaSc ...

Can you explain the purpose of the MomentInput type in ReactJS when using TypeScript?

I am currently facing an issue where I need to distinguish between a moment date input (material-ui-pickers) and a normal text input for an event in my project. const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { const i ...

Determine if a condition is met in Firebase Observable using scan() and return the

Within Firebase, I have objects for articles structured like this: articles UNIQUE_KEY title: 'Some title' validUntil: '2017-09-29T21:00:00.000Z' UNIQUE_KEY title: 'Other title' validUntil: '2017-10-29T21:00:00 ...