Дочерние маршруты не работают в функциональном модуле - PullRequest
0 голосов
/ 07 мая 2020

У меня есть большое приложение, и я не хочу, чтобы все было в файлах app-routing.module и app.module.ts. (например, пути маршрута). Я хочу организовать свои модули в избранные модули (СЕЙЧАС Я НЕ ИСПОЛЬЗУЮ ЛЕНИЗИНУЮ ЗАГРУЗКУ).

Моя проблема в том, что когда я включаю только обычный путь маршрута без дочерних маршрутов, тогда функциональные модули в массиве import в app.module.ts работают. Но когда я включаю дочерние маршруты в некоторые функциональные модули, тогда он не работает. CablecoModule в этом случае Пожалуйста, помогите мне

//app.module.ts
@NgModule({
  declarations: [
    AppComponent,
    PagenotfoundComponent,
    LoginComponent,
    HomeComponent,
    ContactUsComponent,
    ForgotPasswordComponent,
    CoffeeComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
    Ng4LoadingSpinnerModule.forRoot(),  
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    NgbModule.forRoot(),
    UsersModule,

    CablecoModule,

    UiModule,
    AppRoutingModule,
  ],
  providers: [
    {provide: HTTP_INTERCEPTORS, useClass: Interceptor, multi: true},
    MatDatepickerModule
  ],
  bootstrap: [AppComponent],
  exports: [
    // AppRoutingModule,
    // MatDatepickerModule,
    // MatFormFieldModule,
    // MatNativeDateModule,
    // MatInputModule,
    // BrowserAnimationsModule
  ]
})
export class AppModule { }

//app routing 

const appRoutes: Routes = [
     { path: '', component: HomeComponent , canActivate: [AnonymousGuard]},
    { path: 'coffee', component: CoffeeComponent },
    { path: 'contact-us', component: ContactUsComponent },
    { path: 'login', component: LoginComponent},
    { path: 'forgot-password', component: ForgotPasswordComponent },
    { path: 'cpe20', component: Cpe20Component },
   {path:"**" , component:PagenotfoundComponent}
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes),
        // NgDatepickerModule
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoutingModule {

}

//cablecomodule

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    Ng2SmartTableModule,
    NgbModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    MatSidenavModule,
    BrowserAnimationsModule,
    MatTooltipModule,
    CountUpModule,
    NgxDaterangepickerMd.forRoot(),
    CablecoRoutingModule
    //NgxPaginationModule
  ],

  declarations: [DashboardComponent, SurveyComponent, GoogleAutocompleteDirective, GoogleMapComponent, LitBuildingsListComponent, SearchResultsComponent, ListOfUsersComponent, ListOfOrganizationsComponent, ConfigurationComponent, OtherResultsComponent, OrganizationTypeComponent, MultiSiteSearchComponent, RequestServiceabilityComponent, SearchPreviewComponent, PricingComponent, TvCardComponent, UserProfileComponent, ChangePaswComponent, AllMultiSiteSearchesComponent, PromotionsComponent, ComcastContractComponent, ImportServicesComponent, ProvidersComponent, QuotesDashboardComponent, QuotesAdminDashboardComponent, SpectrumContractComponent, SearchHistoryComponent, PackagesComponent, ComcastPackagesComponent, RegularPricingComponent, PackagePricingComponent, FiberPricingComponent, FiberAndVoicePricingComponent, Cpe20Component, CoxContractComponent, ExportComponent, StatisticsComponent, ImportStatusesComponent , SignupComponent],
  providers:[DataService, MatDatepickerModule,DashboardComponent, SurveyComponent, GoogleAutocompleteDirective, GoogleMapComponent, LitBuildingsListComponent, SearchResultsComponent, ListOfUsersComponent, ListOfOrganizationsComponent, ConfigurationComponent, OtherResultsComponent, OrganizationTypeComponent, MultiSiteSearchComponent, RequestServiceabilityComponent, SearchPreviewComponent, PricingComponent, TvCardComponent, UserProfileComponent, ChangePaswComponent, AllMultiSiteSearchesComponent, PromotionsComponent, ComcastContractComponent, ImportServicesComponent, ProvidersComponent, QuotesDashboardComponent, QuotesAdminDashboardComponent, SpectrumContractComponent, SearchHistoryComponent, PackagesComponent, ComcastPackagesComponent, RegularPricingComponent, PackagePricingComponent, FiberPricingComponent, FiberAndVoicePricingComponent, Cpe20Component, CoxContractComponent, ExportComponent, StatisticsComponent, ImportStatusesComponent , SignupComponent],
})
export class CablecoModule { }
//cableco-routing
const routess: Routes = [
{
        path: 'ibs', component: LayoutComponent, children: [
            {
                path: '',
                redirectTo: 'dashboard',
                pathMatch: 'full'
            },
            {
                path: 'dashboard',
                component: DashboardComponent
            },
            {
                path:"signup",
                component:SignupComponent
            }
        ]
    }
]

@NgModule({
  imports: [RouterModule.forChild(routess)],
  exports: [RouterModule]
})
export class CablecoRoutingModule { }

1 Ответ

0 голосов
/ 07 мая 2020
  1. У вас есть <router-outlet></router-outlet> в вашем LayoutComponent?
  2. Каким будет маршрут к CablecoRoutingModule -> DashboardComponent?
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...