Angular 角路由模块

我尝试在angular 8中使用auth/pages和app的不同模块开发路由。html:auth/pages/app.html我放在router outler中 但我在NavigateEUR的控制台中有一个错误，如下所示：

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);

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

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

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);

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

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

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

页面.模块.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);

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

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

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);

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

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

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

页面.routes.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);

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

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

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);

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

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

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

应用程序模块.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);

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

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

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);

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

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

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

应用程序路由.module.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);

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

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

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);

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

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

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

---

从pages.module.ts文件中的声明数组中删除

AuthComponent

。

---

您还需要导出auth.module.ts中的

AuthComponent

，然后您就可以在pages.routes.ts文件中使用它了，没有问题。

现在我还有一个错误：错误：组件AllOrdersComponent不是任何NgModule的一部分，或者该模块尚未导入到您的模块中。您需要声明pages.module.ts文件中的AllOrdersComponent。看起来有一个错误的复制/粘贴，您已经在页面模块中声明了两次AllUsersComponent。