Angular - Render component present inside another module on root url

Question

I have Angular 8 application. I have divided my app into different modules.

AppModule
HomeModule
User Module

I am trying to load the HomeComponent present inside HomeModule on the root url ('/')

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

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';
import { HeaderComponent } from './module/common/header/header.component';
import { HomeModule } from './module/home/home/home.module';
//& so on.


@NgModule({
declarations: [
  AppComponent,
  LogoComponent,
  MenuComponent,
  SearchComponent,
  SignComponent,
  HeaderComponent
],
imports: [
 BrowserModule,
 AppRoutingModule,
 HomeModule,
 UserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.ts

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

const routes: Routes = [
{ path : '', component : HomeComponent, loadChildren: ()=> 
import('../app/module/home/home.module').then(mod => mod.HomeModule)}
];

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

home.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';

@NgModule({
 declarations:
    [
        HomeComponent
    ],
imports: [
    CommonModule,
    HomeRoutingModule

],
exports: [
    HomeComponent
],
 providers: []
})

export class HomeModule { }

But when running the application, it is throwing the below error.

Component HomeComponent is not part of any NgModule or the module has not been imported into your module

What is causing this error?

Thanks!

Md Rafee · Accepted Answer · 2019-09-04 12:53:26Z

1

you made a mistake in app.routing.ts

const routes: Routes = [ { path : '', component : HomeComponent, loadChildren: ()=> import('../app/module/home/home.module').then(mod => mod.HomeModule)} ];

The correct code should be:

const routes: Routes = [
{ path : '', loadChildren: ()=> import('../app/module/home/home.module').then(mod => mod.HomeModule)}
];

Then create a home.routing.ts and code like this way:

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

As you don't need to use it in any other module and it obviously shouldn't, remove HomeComponent from exports:

exports: [
    HomeComponent
],

this code should be removed.

Explanation: Because in app component, we load the module lazily, not component. So, we shouldn't specify homeComponent in app.routing.ts.

Every module should have own routing. As home is a module, it should have a home.routing.ts and we need to specify which route it should go when loading home module. So, we specify the homecomponent in home routing.

edited Sep 4, 2019 at 12:53

answered Sep 4, 2019 at 12:43

Md Rafee

5,6263 gold badges27 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kgn-web Over a year ago

Absolutely Right, Thank You

Collectives™ on Stack Overflow

Angular - Render component present inside another module on root url

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related