Komponente ist Teil der Deklaration der beiden Module: AppRoutingModule und AppModule

Question

Ich versuche, mein Routing-Modul von einem anderen Modul zu trennen, indem ich es in seiner eigenen Typoskript-Datei definiere. Aber ich habe den obigen Fehler: Komponente ist Teil der Erklärung der beiden Module: AppRoutingModule und AppModule

Freigabe beide Module unter:

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

Ich folgte https://angular.io/docs/ts/latest/guide/router.html Routing-Dokumente, aber landete in einem solchen Fehler.

Kann jemand sehen, ob es einen Fehler im Code gibt. Vielen Dank.

Answer 1

Ich denke, Sie sollten AdminHomeComponent bewegen und alle anderen Komponenten, die in AppRoutingModule aus AppModule in einem anderen Modul (n) und hinzufügen, um dieses Modul (en) auf imports von AppRoutingModule referenziert werden.

Answer 2

Es ist nicht möglich!

Sie könnten ein Modul erstellen, das nur diese Komponente enthält, und es in Ihre Module importieren.

Answer 3

Ich kann nicht kommentieren Ich werde dies als Antwort schreiben.

Das ist seltsam, der Code, wie es ist, sollte funktionieren. Ich habe die gleiche Logik versucht und es hat für mich funktioniert.

Können Sie versuchen, die AdminHomeComponent aus der appRoutes entfernen, und sehen, ob es nur AdminHomeComponent oder die anderen Komponenten das gleiche Problem zu erhöhen.

Wenn Sie das gleiche Problem mit anderen Komponenten zu haben. Versuchen Sie, sie NUR in Ihrem Routing-Modul zu deklarieren und sehen Sie, ob es funktioniert (das ist jedoch keine gute Übung).

Es ist ein weiterer Ansatz, um es:

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

persönlich Ich würde tun, was in den anderen 2 Antworten vorgeschlagen wurde.

Übrigens, haben Sie andere Module in Ihrer App?