Angular 7 child routes import component using modules
I'm trying to set some child routes in my angular 7 application but they don't work, I have the following scenario:
I have a base-home.component
and a home.component
, encapsulated the two components in specific modules of each, base-home.module
and home.module
, imported the two modules in app.module
, and set in {[10] } a route '/'
that calls the base-home.component
, and a daughter Route '/home'
that calls the home.component
, but it does not load the page, but if I import the components app.module
instead of importing the modules they work, follows how the files are:
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';
import { BaseHomeModule } from './base-home/base-home.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule,
AppRoutingModule,
BaseHomeModule,
HomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BaseHomeComponent } from './base-home/base-home.component';
const routes: Routes = [
{
path: '',
component: BaseHomeComponent,
children: [
{
path: 'home',
component: HomeComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
// base-home.module.ts
import { NgModule } from '@angular/core';
import { BaseHomeComponent } from './base-home.component';
@NgModule({
declarations: [
BaseHomeComponent
],
exports: [
BaseHomeComponent
]
})
export class BaseHomeModule {}
// home.module.ts
import { NgModule } from '@angular/core';
import { HomeComponent } from './home.component';
@NgModule({
declarations: [
HomeComponent
],
exports: [
HomeComponent
]
})
export class HomeModule { }
This way above it doesn't work, but if I import the base-home.component
direct into the app.module
it works, This Way:
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';
import { BaseHomeComponent } from './base-home/base-home.component';
@NgModule({
declarations: [
AppComponent,
BaseHomeComponent
],
imports: [
BrowserModule,
CommonModule,
AppRoutingModule,
HomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Does anyone know how I can make child routes work by importing only the modules with the encapsulated components without having to import the direct component into
app-module
?
1 answers
In your app.module.ts
try changing the 'component' attribute to 'loadChildren', getting something like:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BaseHomeComponent } from './base-home/base-home.component';
const routes: Routes = [
{
path: '',
component: BaseHomeComponent,
children: [
{
path: 'home',
loadChildren: './home/home.module#HomeModule', // <<<<<<<
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
By directly referencing the module path you do not need to import either HomeModule
or HomeComponent
into your AppModule
.