组件是两个模块声明的一部分：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个答案中的建议。

顺便说一句，你的应用程序中是否有其他模块？