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?