組件是兩個模塊聲明的一部分：AppRoutingModule和AppModule

Question

我想通過在其自己的打字稿文件中定義它來將我的路由模塊與另一個模塊分開。但我得到上述錯誤：組件是兩個模塊的聲明的一部分：

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

：下面兩個模塊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 { } 

我跟着https://angular.io/docs/ts/latest/guide/router.html路由文檔，但降落在這樣的錯誤。

有人可以看看是否有可能在代碼中存在一些錯誤。謝謝。

Answer 1

我想你應該移動AdminHomeComponent和在AppRoutingModule引用出來的AppModule成不同的模塊（S）和該模塊（S）增加的AppRoutingModuleimports所有其他組件。

Answer 2

它不可能！

您可以創建一個包含該組件的模塊並將其導入到您的模塊中。

Answer 3

我不能評論我會寫這個答案。

這很奇怪，因爲它的代碼應該工作。我嘗試了相同的邏輯，併爲我工作。

您能否嘗試從appRoutes中刪除AdminHomeComponent，並查看它是否僅爲AdminHomeComponent或其他組件是否也引發同樣的問題。

如果您也有與其他組件相同的問題。嘗試在你的路由模塊中聲明它們，看看它是否有效（但這不是一個好習慣）。

還有一個辦法吧：

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

就個人而言，我會做其他2個答案中的建議。

順便說一句，你的應用程序中是否有其他模塊？