NullInjectorError: No provider for ChildrenOutletContexts

Question

I'm still learning angular. I was trying to create an example on stackblitz to ask another question and ran into an issue with routing.

I'm trying to set up routing. I have added the following to app.module.ts:

  imports:      [ BrowserModule,
                  FormsModule,
                  RouterModule,

and then I created app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { NavComponent } from './components/NavComponent';
import { SearchComponent } from './components/SearchComponent';
import { ViewComponent } from './components/ViewComponent';

const routes: Routes = [
  { path: '', redirectTo: '/nav', pathMatch: 'full' },
  { path: 'nav', component: NavComponent },
  { path: 'search', component: SearchComponent },
  { path: 'view', component: ViewComponent }
];

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

export class AppRoutingModule {}

and then added these imports to app.module.ts:

import { RouterModule } from '@angular/router';

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

I thought that was all I needed to do, but when I load my app, I get:

ERROR
Error: StaticInjectorError(AppModule)[RouterOutlet -> ChildrenOutletContexts]: 
StaticInjectorError(Platform: core)[RouterOutlet -> ChildrenOutletContexts]: 
NullInjectorError: No provider for ChildrenOutletContexts!

I googled this error and found: No provider for ChildrenOutletContexts (injectionError) and Error: No provider for ChildrenOutletContexts but I don't find these helpful.

Here is my stackblitz: https://stackblitz.com/edit/angular-j1seie?file=src%2Fapp%2Fapp.module.ts.

No idea where to go next.

Replace `RouterModule` with `AppRoutingModule` in your app module imports array. — R. Richards, Jul 06 '19 at 15:03
@R.Richards That seems to have done it. Do you want to create an answer so I can give you credit? — Thom, Jul 06 '19 at 15:07

score 3 · Accepted Answer · edited Jul 06 '19 at 15:29

3

You just need to replace RouterModule with AppRoutingModule in your app module imports array. Without that the application doesn't know about the routes you've configured. Easy enough to miss if this is new to you.

edited Jul 06 '19 at 15:29

Thom

14,013
25
105
185

answered Jul 06 '19 at 15:15

R. Richards

24,603
10
64
64

NullInjectorError: No provider for ChildrenOutletContexts

1 Answers1