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.

angulartypescriptlazy-loadingangular-router

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

SonarLint versus SonarTS: A Comparison of Code Quality Tools

I'm feeling pretty lost when it comes to understanding the difference between SonarLint and SonarTS. I've been using SonarLint in Visual Studio, but now my client wants me to switch to the SonarTS plugin. SonarLint is for analyzing overall pr ...

javascriptangulartypescriptsonarqubesonarlint

Discovering subtype relationships in JSON with TypeScript

Consider the scenario where there are parent and child typescript objects: class Parent { private parentField: string; } class Child extends Parent { private childField: string; } Suppose you receive a list of JSON objects for both types via a R ...

jsontypescriptpolymorphism

What is the process for specifying a method on a third-party class in TypeScript?

I'm facing a challenge while trying to extend a third-party class in TypeScript. The issue is that I am unable to access any existing methods of the class within my new method. One possible solution could be to redeclare the existing methods in a sep ...

javascripttypescript

Issue when transferring properties of a component to a component constructed Using LoadingButton MUI

Check out my new component created with the LoadingButton MUI: view image description here I'm having issues passing props to my component: view image description here Dealing with a TypeScript problem here: view image description here I can resolv ...

typescriptmaterial-ui

Guide on deploying Angular 9 SSR app on Internet Information Services

After upgrading my Angular 7 project to Angular 9, I successfully executed the commands "ng add @nguniversal/express-engine", “npm run build:ssr" and "npm run serve:ssr” in my local environment. The deployment to IIS on the web server created a "dist" ...

angularserver-side-renderingangular-universalangular9

Deactivate the button in the final <td> of a table generated using a loop

I have three different components [Button, AppTable, Contact]. The button component is called with a v-for loop to iterate through other items. I am trying to disable the button within the last item when there is only one generated. Below is the code for ...

javascripthtmltypescriptvue.js

Having trouble with accessing properties like `d3.svg()`, `d3.scale()` and other features of d3js within an Angular 2 environment

Struggling to incorporate d3.js into angular2. Below is the command I used to install d3 in Angular2: npm install --save d3 install --save-dev @types/d3 This is how my package.json appears: { "name": "my-app", "version": "0.0.0", "license": "M ...

javascriptangulard3.js

Leverage the power of Typescript to flatten a JSON model with the help of Class

Currently, I'm exploring how to utilize the class transformer in TypeScript within a Node.js environment. You can find more information about it here: https://github.com/typestack/class-transformer My goal is to flatten a JSON structure using just on ...

node.jstypescriptclass-transformer

Encountering an issue with Angular Flex Layout after including the layout module

Upon adding FlexLayoutModule to the imports section of my app.module.ts, I encountered the following error: ERROR: The target entry-point "@angular/flex-layout" is missing dependencies: - @angular/core - @angular/common - rxjs - @angular/pla ...

angularangular-flex-layout

Combining indexed types with template literals -- add a prefix to each key

Start with type A and transform it into type B by adding the prefix x to each key using Typescript's newest Template Literal Types feature: type A = { a: string; b: string; }; // Automatically generate this. type Prefixed = { xa: string; xb: ...

typescript

Determining Checkbox State in Angular 2: A Simple Guide

I have a set of checkboxes displayed like this: moduleList = ['test1', 'test2', 'test3', 'test4'] <li *ngFor="let module of moduleList"> <input [value]="module" type="checkbox"> {{module}}<br> < ...

angular

Having trouble getting combineLatest to properly normalize data in Angular using RxJS

Difficulty arose when attempting to normalize data prior to merging it into a new stream, resulting in no changes. I need to verify whether the user has liked the post using a Promise function before including it in the Posts Observable. this.data$ = comb ...

angularasynchronousrxjs

RTK update mutation: updating data efficiently without the need to refresh the page

I am facing an issue with my mui rating component in a post-rating scenario. Although the rating updates successfully in the data, the page does not refresh after a click event, and hence, the rating remains enabled. To address this, I have implemented a d ...

typescriptreduxmaterial-uirtk-query

Tips for transfering variables from an electron application to the backend of an Angular project

My goal is to develop a website and desktop application using the same code base. However, due to some minor differences between the two platforms, I need a way for my Angular app to distinguish whether it has been called from the web or from Electron. I& ...

javascriptangulartypescriptelectron

How to Use ngFor to Create a Link for the Last Item in an Array in Angular 7

I need help with adding a link to the last item in my menu items array. Currently, the menu items are generated from a component, but I'm unsure how to make the last item in the array a clickable link. ActionMenuItem.component.html <div *ngIf= ...

javascriptangulartypescriptangular7angular8

The Append method in FormData is not functioning properly within Angular

I'm facing a challenge in my Angular application where I need to enable image uploads to the server. The issue arises when attempting to add a selected file to the newly created FormData object. Below is the relevant TypeScript component snippet: ima ...

angular

Tips for sending a parameter to an onClick handler function in a component generated using array.map()

I've been developing a web application that allows users to store collections. There is a dashboard page where all the user's collections are displayed in a table format, with each row representing a collection and columns showing the collection ...

javascriptreactjstypescriptnext.js

Avoid triggering the onClick event on specific elements in React by utilizing event delegation or conditional rendering

programming environment react.js typescript next.js How can I prevent the onClick process from being triggered when the span tag is pressed? What is the best approach? return ( <div className="padding-16 flex gap-5 flex-container" ...

reactjstypescriptnext.js

How to efficiently retrieve automatically generated elements by ID in Angular 2

In order to create a 6x6 grid, I am using the following code: <ion-grid> <ion-row *ngFor="let rowIndex of createRange(6)" [attr.id]="'row-'+rowIndex"> <ion-col col-2 *ngFor="let colIndex of createRange(6)" [attr.id]= ...

angular

Using Angular2 Pipes to display raw HTML content

I am currently working on developing a custom pipe in Angular2 that is capable of outputting raw HTML. My goal is to take input with newlines and convert them into HTML line breaks. Can anyone guide me on how to display raw HTML from an Angular2 pipe? Bel ...

angular