angular - pasar - El componente forma parte de la declaración de ambos módulos: AppRoutingModule y AppModule

pasar parametros entre componentes angular 4

Question

Intento separar mi módulo de enrutamiento de otro módulo definiéndolo en su propio archivo de texto mecanografiado. Pero obtengo el error anterior: el componente forma parte de la declaración de ambos módulos: AppRoutingModule y AppModule

Compartiendo ambos módulos a continuación:

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 { }

Seguí https://angular.io/docs/ts/latest/guide/router.html documentos de enrutamiento pero caí en dicho error.

¿Alguien puede ver si hay algún error que podría estar allí en el código? Gracias.

Answer 1

Creo que debería mover AdminHomeComponent y todos los demás componentes a los que se hace referencia en AppRoutingModule fuera de AppModule en un módulo (s) diferente y agregar este (s) módulo (s) a las imports de AppRoutingModule .

Answer 2

¡No es posible!

Podría crear un Módulo que incluya solo ese componente e importarlo a sus módulos.

Answer 3

No puedo comentar. Escribiré esto como una respuesta.

Esto es extraño, el código tal como debería funcionar. Intenté la misma lógica y funcionó para mí.

¿Puedes intentar eliminar AdminHomeComponent de appRoutes y ver si solo AdminHomeComponent o los demás componentes presentan el mismo problema?

Si tiene el mismo problema con otros componentes también. Trate de declararlos SOLAMENTE en su módulo de enrutamiento y vea si funciona (aunque esta no es una buena práctica).

Hay otro enfoque al respecto:

app-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 { }

Personalmente, haría lo sugerido en las otras 2 respuestas.

Por cierto, ¿tienes algún otro módulo en tu aplicación?