Angular 路由模块

Question

我尝试在每个 components.html 中使用 auth/pages 和应用程序的不同模块来开发 angular 8 中的路由：auth/pages/app.html 我把 router-outler 但是我在 navigateur 的控制台中有这样的错误：

compiler.js:2175 Uncaught Error: Type AuthComponent is part of the declarations of 2 modules:
AuthModule and PagesModule! Please consider moving AuthComponent to a higher module that 
imports AuthModule and PagesModule. You can also create a new NgModule that exports and 
includes AuthComponent then import that NgModule in AuthModule and PagesModule.

auth.module.ts :

@NgModule({
    declarations: [
        AuthComponent,
        LoginComponent,
        RegisterComponent,
        ForgotPasswordComponent,
        ResetPasswordComponent
    ],
    exports: [

    ],
    imports: [
        FormsModule,
        CommonModule,
        AUTH_ROUTES
    ]
})
export class AuthModule { }

auth-routes.modules.ts

const authRoutes: Routes = [
    {
        path: "login", component: LoginComponent, data: { title: "Login" }
    },
    {
        path: "register", component: RegisterComponent, data: { title: "Register" }
    },
    {
        path: "forgot/password", component: ForgotPasswordComponent, data: { title: "Forgot Password" }
    },
    {
        path: "reset/password", component: ResetPasswordComponent, data: { title: "Reset Password" }
    }
];
export const AUTH_ROUTES = RouterModule.forChild(authRoutes);

pages.module.ts

@NgModule({
    declarations: [
        AuthComponent,
        AllUsersComponent,
        AllUsersComponent,
        TestrouteComponent,
        PagesComponent
    ],
    exports: [

    ],
    imports: [
        BrowserModule,
        PAGES_ROUTES,
        AuthModule,
        CommonModule,
        RouterModule
    ]
})

pages.routes.ts

const pagesRoutes: Routes = [
    {
        path: "users", component: AllUsersComponent, data: { title: "Users" }
    },
    {
        path: "orders", component: AllOrdersComponent, data: { title: "Orders" }
    },
    {
        path: "protect", component: TestrouteComponent, data: { title: "Protect" }, canActivate: [AuthGuard]
    },
    {
        path: '', component: AuthComponent, loadChildren: '../pages/auth/auth.module.ts#AuthModule'
    },
];
export const PAGES_ROUTES = RouterModule.forChild(pagesRoutes);

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    PagesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
    PagesModule,
    ServiceModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

const routes: Routes = [
  {
    path: '', component: PagesComponent, loadChildren: '../app/pages/pages.module.ts#PagesModule'
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

从 pages.module.ts 文件中的声明数组中删除 AuthComponent。您还需要在 auth.module.ts 中导出 AuthComponent，然后您应该可以在 pages.routes.ts 文件中使用它。

Angular 路由模块

Angular routes modules

router

module

angular