I'm developing a small angular project with three components.Is that project I have a sub module called component.module and I have added added routing in that module and component.module includes to App.module.
It's compiling without any error but nothing display on screen (see image below).
My project folder structure is like this.
components/app-routing.module.ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentListComponent, IntentCreateComponent } from "./intent";
const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{
path: "home",
component: MainLayoutComponent,
children: [
{ path: "list", component: IntentListComponent },
{ path: "create", component: IntentCreateComponent }
]
}
];
@NgModule({
imports: [CommonModule, RouterModule.forRoot(routes)],
declarations: [],
exports: [RouterModule]
})
export class AppRoutingModule {}
components/component.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentCreateComponent, IntentListComponent } from "./intent";
import { ProjectCreateComponent } from "./project";
@NgModule({
declarations: [
MainLayoutComponent,
IntentCreateComponent,
IntentListComponent,
ProjectCreateComponent
],
imports: [
BrowserModule,
RouterModule,
AppRoutingModule
],
providers: []
})
export class ComponentModule {}
app.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ComponentModule } from "./components/component.module";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
ComponentModule,
],
providers: [],
bootstrap: [AppComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule {}
app.component.html
<app-main-layout></app-main-layout>
app/components/main-layout/main-layout.component.html
<div class="side-bar">
</div>
<div class="content-wrapper">
<router-outlet></router-outlet>
</div>
If you don't export anything from your ComponentModule
module, then importing it in your AppModule
won't give it anything from the ComponentModule
.
Since you're using Routing
and MainLayoutComponent
from your ComponentModule
in your AppModule
, you'll have to add these to the exports
array of the ComponentModule
as well.
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentCreateComponent, IntentListComponent } from "./intent";
import { ProjectCreateComponent } from "./project";
@NgModule({
declarations: [
MainLayoutComponent,
IntentCreateComponent,
IntentListComponent,
ProjectCreateComponent
],
imports: [
BrowserModule,
RouterModule,
AppRoutingModule
],
providers: [],
exports: [AppRoutingModule, MainLayoutComponent]
})
export class ComponentModule {}
PS: If you want to use anything from your ComponentModule
into your AppModule
, you'll have to export it from your ComponentModule
by adding it to the exports
array of your ComponentModule
.
Your routes configuration should be something like:
const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{
path: "home",
component: MainLayoutComponent,
children: [
{ path: "", component: IntentListComponent },
{ path: "create", component: IntentCreateComponent },
]
}];
or
const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{
path: "home",
component: MainLayoutComponent,
children: [
{ path: "list", component: IntentListComponent },
{ path: "create", component: IntentCreateComponent },
{ path: "", redirectTo: "list" pathMatch: "full" }
]
}];
As your component is loaded, but there is nothing in the view. But as for your configuration if you route to /home/list or /home/create that component will be loaded
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With