2
I’m trying to set some daughter routes in my angular application 7 but they don’t work, I have the following scenario:
I own a base-home.component
and a home.component
, I encapsulated the two Components into specific modules of each, base-home.module
and home.module
, imported the two modules in the app.module
, and sevens in the app-routing.module
a route '/'
who calls the base-home.component
, and a daughter route '/home'
who calls the home.component
, but it does not load the page, but if I import the Components directly on app.module
instead of importing the modules they works, follows how are the files:
// 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 { }
That way up it doesn’t work, but if I care the base-home.component
direct no app.module
it works, that 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 modules with the encapsulated Components without having to import the Component directly on
app-module
?
I did it the way I said, but it didn’t work, he says
router-outlet is not a know element
– Matheus
If you’re not using the
router-outlet
then I see no reason to have encapsulated the components in specific modules. You could simply use the components without creating modules and callhome.component
in hisapp.module
as I had done before.– Ícaro de Barros