The component is part of the declaration of both modules: AppRoutingModule and AppModule

Question

I am trying to separate the routing module from another module by defining it in my own typescript file. But I get the above error: The component is part of the declaration of both 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 the https://angular.io/docs/ts/latest/guide/router.html routing protocols, but got into such an error.

Can anyone see if there is any kind of error in the code. Thanks.

Answer 1

I think you should move the AdminHomeComponent and all other components that are specified in the AppRoutingModule from the AppModule to another module (s) and add this module to imports from the AppRoutingModule .

Answer 2

Impossible!

You can create a module containing only this component and import it into your modules.

Answer 3

I can not comment, I will write this as an answer.

It's weird code, how it should work. I tried the same logic and it worked for me.

Can you try to remove AdminHomeComponent from appRoutes and see if it will be only AdminHomeComponent or other components will also raise the same problem.

If you have the same problem with other components. Try declaring them ONLY in your routing module and see if it works (this is not a good practice).

There is another approach:

application-routing.module.ts

 import { Host, ModuleWithProviders } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { OtherComponent } from './other.component'; import { HomeComponent } from './home.component'; const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'other', component: OtherComponent}, { path: '', component: HomeComponent } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

app.module.ts

 import { routing } from './app-routing.module'; import { OtherComponent } from './other.component'; import { HomeComponent } from './home.component'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, HomeComponent, OtherComponent ], imports: [ BrowserModule, FormsModule, HttpModule, routing ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

Personally, I would do what was suggested in the other two answers.

By the way, do you have any other modules in your application?