Angular модулей маршрутов - PullRequest
Новая
       13

Angular модулей маршрутов

0 голосов
/ 04 февраля 2020

Я пытаюсь разработать маршруты в angular 8, используя разные модули auth / pages и app, в каждом компоненте. html: auth / pages / app. html Я ставлю router-outler, но я В консоли навигатора есть ошибка: 

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

1 Ответ

0 голосов
/ 04 февраля 2020

Удалите AuthComponent из массива объявлений в файле pages.module.ts. Вам также нужно будет экспортировать AuthComponent в auth.module.ts, и тогда вы сможете без проблем использовать его в файле pages.routes.ts.

...