组件是两个模块声明的一部分：AppRoutingModule 和 AppModule

Question

我试图通过在自己的打字稿文件中定义我的路由模块与另一个模块来分离它。但我收到上述错误：组件是两个模块声明的一部分：AppRoutingModule 和 AppModule

分享以下两个模块：

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

我关注了https://angular.io/docs/ts/latest/guide/router.html 路由文档，但遇到了这样的错误。

谁能看看代码中是否存在一些错误。谢谢。

Answer 1

我认为您应该将AdminHomeComponent 和AppRoutingModule 中引用的所有其他组件从AppModule 移出到不同的模块中，并将此模块添加到imports 的AppRoutingModule 中。

Answer 2

我不能发表评论，我会写这个作为答案。

这很奇怪，代码应该可以工作。我尝试了相同的逻辑，它对我有用。

您能否尝试从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 个答案中的建议进行操作。

顺便问一下，您的应用中还有其他模块吗？

Answer 3

不可能！

您可以创建一个仅包含该组件的模块并将其导入到您的模块中。