Using routing with modules instead of components in Angular 10+ involves configuring the routing paths within the module files

I recently tried implementing modules instead of components for routing in Angular 10, but encountered a white screen issue.

Any assistance would be greatly appreciated.

Here is the code snippet I've been working with:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DashboardModule } from './components/dashboard/dashboard.module';

import { DashboardComponent } from './components/dashboard/dashboard.component';

const routes: Routes = [
    { path: '', loadChildren: () => DashboardModule }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Dashboard module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DashboardComponent } from './dashboard.component';


@NgModule({
  declarations: [
    DashboardComponent
  ],
  imports: [
    CommonModule
  ]
})
export class DashboardModule { }

Dashboard Component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor() { 
    alert('asdf');  
  }

  ngOnInit(): void {
  }

}

Thank you

Answer №1

Lazy loaded feature modules must declare their child routes separately. Here's an example:

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { DashboardComponent } from './dashboard.component';

    const routes: Routes = [
      {
        path: '',
        component: DashboardComponent,
      },
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class DashboardRoutingModule { }

Remember to always load lazy modules as Emilien mentioned earlier :)

loadChildren: () => import('./components/dashboard/dashboard.module').then(m => m.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

A guide on utilizing ng-repeat to iterate through array values in Views

Need help with using ng-repeat on array values within an ng-repeat in VIEWS? The second ng-repeat is not functioning properly. Here is the value of generalDocument.documents: ["14-10-2015.xls","15-10-2015.xls","16-10-2015.xls"] <div class="box-body ...

Automatically select and pre-fill a list item based on its value using jQuery

I'm a beginner in JQuery. In my application I have the following: Here is my HTML code: <ul id="list"> <li> <a class="selected" value="0" href="#" id="sel">ALL</a> </li> <li> <a hre ...

Effective ways to transfer data between services and controllers

Is there a way to pass values from services to controllers effectively? Despite researching on stackoverflow, I haven't found a solution that addresses my issue. My goal is to access google spreadsheets using tabletop.js. Interestingly, when I log val ...

Utilizing Vue and TypeScript - Retrieving a Variable Declared in the Data() Method within Another Method

I recently made the switch to using Vue3 with TypeScript after previously working with Vue2 and JavaScript. I am encountering an issue in my IDE where it is showing an error (even though the code itself functions correctly, but may not be entirely accurate ...

Tips for selecting a pagination page number in Python with Selenium

I've been struggling to figure out how to interact with the page numbers of a pagination class for a while now. Despite trying various methods, I can only manage to highlight the container of the number without being able to actually click on it. Bel ...

Problem with Snowpack's internal module import paths

While working on a project, I am using npx snowpack build --watch instead of the dev command because of a Flask backend. However, I am facing issues with internal imports, specifically modules importing dependencies like Bootstrap importing Popper. The pr ...

Is there a universal method to transform the four array values into an array of objects using JavaScript?

Looking to insert data from four array values into an array of objects in JavaScript? // Necessary input columnHeaders=['deviceName','Expected','Actual','Lost'] machine=['machine 1','machine 2&apo ...

Customizing Passport JS Bearer strategy for various endpoints and HTTP REST operations

I'm currently using the BearerStrategy and I am attempting to configure different strategies for each endpoint or method within the same router. After reviewing the documentation, I have not come across any references to this particular scenario othe ...

Issue with Angular: Child component not receiving data after successful parent component call

I'm currently working with a parent and child component setup. Within the child component, I have a button configured like this: //child.component.html <button mat-raised-button [disabled]="!form.valid || submitButtonDisable" type = 'Submi ...

Leveraging Swift's self within Javascript for interacting with Swift class properties and methods

In a project I am working on, I use a JS method called function jsMethod(selfRef) from a Swift class. Let's say we have a class A where this method is invoked. The selfRef parameter holds a reference to the instance of class A. How can I utilize this ...

What steps should be taken once the idToken in Firebase has expired?

My code is utilizing the onAuthStateChanged function: this.unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => { if (user) { user.getIdToken(true).then((idToken) => { console.log(user) ... }); } After the idT ...

Error message: "Angular requires either importing or local installation"

For my ionic application development, I encountered an issue while trying to link pages together in the ionic creator. The error message on the .ts file is: typescript: src/pages/home/home.ts, line: 4 Individual declarations in merged declar ...

a common pattern used to substitute website links

I am trying to modify my code that creates HTML links from plain text. While it currently works well, I want to exclude any links that contain .png or .jpg extensions. Does anyone have suggestions on how to adjust the regular expression? var urlPattern ...

Using AngularJS to add an element to an array based on a specified condition

dashboardCtrl Data app.controller('dashboardCtrl', ['$scope','$rootScope', function ($scope, $rootScope) { //Color $scope.Color = [{ colorname: "Red", number: "(3)" }, { colorname: "Brown ...

Transform User's Regex Output into Uppercase

My nodejs program allows users to input text and apply their own regular expressions for editing. I want users to have the option to capitalize or lowercase text as well. For example, if a user enters "StackOverflow is great!" with the regex (.) set to be ...

The getTotalLength() method in SVG may not provide an accurate size measurement when dealing with non-scaling-stroke. To obtain the correct scale of

In my current project, I am utilizing JavaScript to determine the length of a path and apply half of that length to the stroke-DashArray. However, I have encountered an issue as I am using vector-effect="non-scaling-stroke" in order to maintain a consisten ...

What is the best way to transform this unfamiliar CSS element into JavaScript code?

I'm facing an issue where I want to animate a CSS image based on time constraints, but since it's in CSS, I'm unable to achieve the desired effect. The animation in question is not the sun itself, but rather a yellowish half-circle animation ...

What is causing my Fabric.js canvas to malfunction?

Here is the link to my JSFiddle project: http://jsfiddle.net/UTf87/ I am facing an issue where the rectangle I intended to display on my canvas is not showing up. Can anyone help me figure out why? HTML: <div id="CanvasContainer"> <canvas id ...

Every row within the data grid component must contain a distinct `id` property

How do I utilize statId instead of id in my code? Should I create a unique id property for each row? Error: MUI: All rows in the data grid component must have a distinct id property. Alternatively, you can define a custom id using the getRowId prop. A ...

Why is it impossible for me to delete the class / property of this object?

Within a series of nested divs, there are additional divs containing multiple imgs. The goal is to cycle through these images using CSS transitions. To achieve this, a JavaScript object was created to track the divs, sub-divs, and images. Three arrays were ...