No provider for ChildrenOutletContexts! in Angular-CodePudding

I created a simple application for testing, I am getting - "No provider for ChildrenOutletContexts!" error, i have checked different posts related to the same but of no help.

My Structure is App Module has App Routing Module and from which i am doing lazy loading to Routing example module (which again has routing module).

App Routing Module

const parentRoutes: Route[] = [
{
    path: 'test',
    loadChildren: () =>
    import('./routing-example/routingexample.module').then(
      (x) => x.RoutingExampleModule
    ),
  },
];


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

App Module File

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Routing Example Routing Module

import { Component1 } from "./component1/component1.component";
import { Component2 } from "./component2/component2.component";
import { RoutingExampleComponent } from "./routingexample.component";


export const compRoutes: Route[] = [
  {
    path: '',
    component: RoutingExampleComponent,
    children: [
      {
        path: 'comp1',
        component: Component1,
        pathMatch: 'full',
      },
      {
        path: 'comp2',
        component: Component2,
        pathMatch: 'full',
      },
      {
        path: '',
        redirectTo: 'comp1',
        pathMatch: 'full',
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(compRoutes)],
  exports: [RouterModule],
})

export class RoutingExampleRoutingModule {

}

Routing example Module -

import { RoutingExampleComponent } from "./routingexample.component";

@NgModule({
  imports: [
    RoutingExampleRoutingModule
  ],
  declarations: [
    RoutingExampleComponent,
   Component1,
   Component2
  ],
})
export class RoutingExampleModule {
 
}

My Application html has only -

<router-outlet></router-outlet>

I know because of this only issue coming but dont know the exact issue though,

Any help would be highly appreciated.

CodePudding user response：

If you are using form in your html, then you have to import ReactiveFormsModule in RoutingExampleModule, however I am not sure this will solve your problem.

Try import ReactiveFormsModule, sometimes this may create this type of issues.

CodePudding user response：

Issue got resolved.

I have added the same things in the stackblitz,

It is working there !