I am new to angular and trying to separate my modules in Angular2 app having the following directory structure.
I have my module and other components declared in the AppModule, but I am getting an error in browser console that Unexpected HomeModule declared by AppModule
app
--authentication
---- htmls, ts, css
--home
----dashboard
--------html, ts, css
----representativs
--------html, ts, css
----home-routing.module.ts
----home.module.ts
--app.routing.ts
--app.module.ts
app.module.ts
import { routing } from "./app.routing"
import { AppComponent } from './app.component';
import { HomeModule } from "./home/home.module";
@NgModule({
imports: [BrowserModule, routing, HttpModule, ReactiveFormsModule],
declarations: [ AppComponent, HomeModule],
bootstrap: [AppComponent],
providers: [UserAuthenticationService]
})
export class AppModule { }
home.module.ts
import { NgModule } from '@angular/core';
import { DashboardComponent } from './dashboard/dashboard.component';
import { RepresentativesComponent } from './representatives/representatives.component';
import { HomeRoutingModule } from "./home-routing.module";
@NgModule({
imports: [
HomeRoutingModule
],
declarations: [
DashboardComponent,
RepresentativesComponent,
]
})
export class HomeModule { }
home-routing.ts
const homeRoutes: Routes = [
{
path: 'home',
component: HomeComponent,
children: [
{
path: "representatives",
component: RepresentativesComponent
},
{
path: "dashboard",
component: DashboardComponent
},
{
path: "",
redirectTo: "dashboard",
pathMatch: "full"
}
]
}
]
@NgModule({
imports: [
RouterModule.forChild(homeRoutes)
],
exports: [
RouterModule
]
})
export class HomeRoutingModule { }
app.routing.ts
import { AuthenticationComponent } from "./authentication/authentication.component";
import { HomeComponent } from "./home/home.component";
const routes: Routes = [
{
path: 'auth/:action',
component: AuthenticationComponent
},
{
path: 'auth',
redirectTo: 'auth/signin',
pathMatch: 'prefix'
},
{
path: '',
redirectTo: 'home',
component: HomeComponent
}
]
export const routing = RouterModule.forRoot(routes);
You need to correctly import your HomeModule
in the imports
section, not declarations
:
@NgModule({
imports: [BrowserModule, routing, HttpModule, ReactiveFormsModule, HomeModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [UserAuthenticationService]
})
export class AppModule {
}
I recommend this article which beautifully explains the @NgModule thing
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