Component is part of declaration of both the modules:AppRoutingModule and AppModule

Question

I am trying to separate my routing module from another module by defining it in its own typescript file. But I get the above error:Component is part of declaration of both the modules:AppRoutingModule and AppModule

Sharing both modules below:

AppRoutingModule

import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { AdminHomeComponent } from './nav/adminhome.component'
import { UserHomeComponent } from './nav/userhome.component'
import { ContactComponent } from './nav/contact.component'
import { LandingComponent } from './nav/mainhome.component'
import { LoginFormComponent } from './nav/login.component'


const appRoutes: Routes = [
    { path: 'login', component: LoginFormComponent },
    { path: 'adminHome', component: AdminHomeComponent },
    { path: 'userHome', component: UserHomeComponent },
    { path: 'contact', component: ContactComponent },
    { path: '', component: LandingComponent }
];


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

AppModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { AppRoutingModule} from './app.routing'

import { AdminHomeComponent } from './nav/adminhome.component'
import { UserHomeComponent } from './nav/userhome.component'
import { ContactComponent } from './nav/contact.component'
import { LandingComponent } from './nav/mainhome.component'
import { LoginFormComponent } from './nav/login.component'
import { ShareService } from './nav/ShareService'
//import { PaginationModule } from 'ng2-bootstrap';
//import { Ng2PaginationModule } from 'ng2-pagination';

@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule, AppRoutingModule ],
    declarations: [AppComponent, AdminHomeComponent, UserHomeComponent, ContactComponent, LandingComponent, LoginFormComponent],
    bootstrap: [AppComponent],
    providers: [ShareService]

})
export class AppModule { }

I followed https://angular.io/docs/ts/latest/guide/router.html routing docs but landed in such error.

Can someone see if there's some mistake that might be there in the code. Thanks.

Answer 1

I think you should move AdminHomeComponent and all other components that are referenced in AppRoutingModule out of AppModule into a different module(s) and add this module(s) to imports of AppRoutingModule.