What could be causing my router-outlet to malfunction in an Angular CLI project?

Just starting out with Angular CLI and still learning TypeScript.

I'm running into an issue with a basic CLI-generated Angular project.

Essentially, the

<router-outlet></router-outlet>
is not displaying any content.

Here is my code. Any help in identifying and explaining the issue would be highly appreciated...

+ app
|- app-routing.module.ts
|- app.component.css
|- app.component.html
|- app.component.spec.ts
|- app.component.ts
|- app.module.ts
|-+ homepage
  |- homepage-routing.module.ts
  |- homepage.module.ts
  |-+ home
    |- home.component.css
    |- home.component.html
    |- home.component.spec.ts
    |- home.component.ts

home.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

homepage-routing.module.ts

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

const routes: Routes = [
  {path : '', component : HomeComponent}
];

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

homepage.module.ts

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

import { HomepageRoutingModule } from './homepage-routing.module';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    HomepageRoutingModule
  ]
})
export class HomepageModule { }

app-routing.module.ts

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

const routes: Routes = [
  {path : 'home', loadChildren : './homepage/homepage.module'},
  {path : '', redirectTo : '/home', pathMatch : 'full'}  
];

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

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<p>Application loaded</p>
<router-outlet></router-outlet>

home.component.html

<div class="content">
  <h2>
    Home Dashboard
  </h2>
  <section>
    Welcome to the Home component inside the
    Home module.
    Et harum quidem rerum facilis est et expedita distinctio.
    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil 
    impedit quo minus id quod maxime placeat facere possimus, 
    omnis voluptas assumenda est, omnis dolor repellendus. 
    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus 
    saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. 
  </section>
</div>

Answer №1

The module name needs to be included in this section:

{path: 'home', loadChildren : './homepage/homepage.module'}

Update it to:

{path: 'home', loadChildren : './homepage/homepage.module#HomepageModule'}

Answer №2

Follow this format:

{
    route : 'dashboard',
    loadPage : './dashboard/dashboard.module#DashboardModule',
},

Answer №3

Ensure the HomepageModule is properly imported into your AppModule

import { HomepageModule } from './homepage/homepage.module';

@NgModule({

  imports: [
    BrowserModule,
    AppRoutingModule,
    HomepageModule 
  ],
  ...
})
export class AppModule { }

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

Embedding Interfaces within Interfaces

I am faced with a TypeScript interface challenge: interface SupplierSettings { id_supplier_settings?: number; is_auto_order: boolean; order_cron: string; email: string; get_next_run_date?: string; dont_wait_for_mail_response: boolea ...

Exploring the Mindfulness of Angular2 Universal: Deciding Between app.browser.module.ts and app.node.module.ts

When using angular2 universal, there are two crucial files mentioned in the documentation: app.browser.module.ts app.node.module.ts https://github.com/angular/universal-starter Initially, both these files may look identical. My understanding is that one ...

Flex layout in Angular is not able to adapt to content responsiveness

While the content of home.component.html is unresponsive and only displays some parts of the UI without scaling, when I directly place the code from home.component.html into app.component.html, it becomes responsive and functions perfectly. If anyone knows ...

When Typescript Encounters Compilation Errors, Treat Them as Warnings Instead

After using npx create-react-app my-app --typescript to create my app, I want to set it up in a way that allows me to compile it even when there are typescript errors, so I can address them later. I couldn't find any compilerOptions for this. Is ther ...

Angular Material transition animation in fading style

After implementing the routing animation for my Angular 6 + Material app following this answer, I decided to switch to a different animation effect: const fade = [ // route 'enter' transition transition(':enter', [ // css styles ...

How come Typescript allows me to generate intersection types that seem impossible?

Despite being unimplementable, the type definition below does not trigger any warnings from the compiler. // No type error type impossible = 0 & string[] & 'anything' An item cannot simultaneously be a number, a string[], and a stri ...

CORS in Node.js is causing issues with the functionality of the POST method, whereas the GET method

Can anyone help me with POSTing data from the body to MongoDB? I'm experiencing issues with CORS where I can only use the GET method successfully. What changes do I need to make in the CORS middleware configuration? ...

Tips for enabling the TypeScript compiler to locate bokeh's "*.d.ts" files

I recently made the switch from Bokeh's convenient inline extension framework to their npm based out of line build system. I'm currently working on getting my extension to build, but I've noticed that Bokeh organizes all TypeScript *.ts.d fi ...

What is the recommended method for importing MAT_LABEL_GLOBAL_OPTIONS?

After studying the example provided in Form field with label, I decided to modify the behavior of mat-form-field placeholder. There are three options available: auto, always, and never. This feature is very useful and can be tailored according to the type ...

Submit numerous queries to verify the presence of a name and assign it to the name attribute

I have a collection of unique devices. As part of a process, I need to assign a default name to each device ("DeviceX" - where X is a sequential number), but some of the names may already be in use. To handle this, I must make a request to check ...

Delaying a request when a button is clicked in Angular using debounce

Struggling to figure out how to debounce an HTTP request using Rxjs after a button is clicked. What I want to accomplish is for the post to be delayed by x seconds after the button is clicked. btnClick() { this.loader = true; let send = "&qu ...

Switch things up in the mat-tree angular

Is there a way to change the orientation of a mat-tree-node to "RTL" and adjust the padding to be on the right side? <mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggl ...

Using TypeScript with Node.js and Sequelize - the process of converting a value to a number and then back to a string within a map function using the OR

Currently, I am facing a challenge in performing addition on currency prices stored as an array of objects. The issue arises from the fact that the currency type can vary among 3 different types within the array of objects. The main hurdle I encounter is ...

Steps for hosting Angular on Firebase:1. Set up a Firebase project

I am having trouble getting my Angular app to display properly on Firebase after deployment. Instead of showing my app, it is displaying the default index.html generated by Firebase. How can I fix this? This is what my firebase.json file looks like: { ...

Tips for Repurposing Angular 4 Components

I've integrated some components from primeNG (https://www.primefaces.org/primeng) into my project. These components come with their own set of properties and events. At times, I need to modify these components, so I'm creating my custom componen ...

The ts-mocha test does not play well with the use of node-fetch library

I have set up ts-mocha and node-fetch to run a unit test, but I am encountering the following error: TypeError: Unknown file extension ".ts" for ... The content of the file is as follows: import fetch from 'node-fetch'; export defau ...

Typescript Angular filters stop functioning properly post minification

I developed an angular filter using TypeScript that was functioning properly until I decided to minify the source code. Below is the original filter: module App.Test { export interface IGroupingFilter extends ng.IFilterService { (name:"group ...

Indicate the location of tsconfig.json file when setting up Cypress

Having trouble integrating Cypress with Typescript? I've encountered an issue where Cypress is unable to locate the tsconfig.json file I created for it. My preference is to organize my project with a custom directory structure, keeping configuration f ...

Bespoke directive - Angular 2/4/5

Currently, I am using Angular 5 CLI but for some reason my custom directive is not working as expected. There are no errors showing up in the console either. I am trying to apply some styles to make the image fill the full width. Below are two different i ...

What is the syntax for typing the router instance in Next.js?

I'm working on a password reset request form in my Next.js project. Here's the code I have: "use client"; import * as React from "react"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } fro ...