Question

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

分享以下两个模块：

AppRoutingModule

FuncN

的AppModule

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

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

有人可以看看代码中是否存在某些错误。感谢。

Answer 1

不可能！

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

Answer 2

我无法发表评论我会将此作为答案。

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

您可以尝试从AdminHomeComponent中移除appRoutes，看看它是否仅AdminHomeComponent或其他组件也引发同样的问题。

如果您对其他组件也有同样的问题。尝试仅在路由模块中声明它们并查看它是否有效（尽管这不是一个好习惯）。

还有另一种方法：

应用-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个答案中建议的内容。

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

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

2 个答案: