title: Angular 5 Router Module No provider for ChildrenOutletContexts! error
body: <p>I am working on the part of routing in my Angular 5 project.</p>
  
  <p>I did the following:</p>
  
  <ol>
  <li><p>I created a new routes module called <code>routes.module.ts</code>:</p>
  
  <p><code>import { RouterModule, Routes } from '@angular/router';</code></p>
  
  <p><code>import { UdemyComponent } from './udemy/udemy.component';</code></p>
  
  <p><code>const appRoutes: Routes = [
      {path: 'udemy', component: UdemyComponent}
  ];</code></p>
  
  <p><code>@NgModule({
      imports: [
          RouterModule.forRoot(appRoutes, { enableTracing: true})//&lt;--Debugging purposes only)
      ]
  });</code></p>
  
  <p><code>export class RouteModule {}</code></p></li>
  <li><p>In the <code>app.module.ts</code>:</p>
  
  <p><code>import { RouterModule, Routes } from '@angular/router';</code></p>
  
  <p><code>import { RouteModule } from './routes.module';</code></p>
  
  <pre><code>imports: [
  BrowserModule,
  
  ReactiveFormsModule,
  
  HttpClientModule,
  
  RouterModule
  ],
  </code></pre></li>
  <li><p>I added the following in my app.component.ts:</p>
  
  <p></p></li>
  </ol>
  
  <p>And finally, I've got the following error:</p>
  
  <blockquote>
    <p>AppComponent.html:59 ERROR Error:
    StaticInjectorError[ChildrenOutletContexts]:<br>
    StaticInjectorError[ChildrenOutletContexts]: 
        NullInjectorError: No provider for ChildrenOutletContexts!
        at <em>NullInjector.get (core.js:993)
        at resolveToken (core.js:1281)
        at tryResolveToken (core.js:1223)
        at StaticInjector.get (core.js:1094)
        at resolveToken (core.js:1281)
        at tryResolveToken (core.js:1223)
        at StaticInjector.get (core.js:1094)
        at resolveNgModuleDep (core.js:10878)
        at NgModuleRef</em>.get (core.js:12110)
        at resolveDep (core.js:12608)</p>
  </blockquote>
  
  <p>After a few searches I found this <a href="https://stackoverflow.com/questions/46108581/no-provider-for-childrenoutletcontexts-injectionerror?answertab=votes#tab-top">link on stack</a>. So I changed my imports in <code>app.module.ts</code> imports into:</p>
  
  <pre><code>imports: [
  BrowserModule,
  ReactiveFormsModule,
  HttpClientModule,
  RouterModule.forRoot(RouteModule)
  ],
  </code></pre>
  
  <p>So I've got the following error:</p>
  
  <blockquote>
    <p>Error: Invalid configuration of route ''. One of the following must be
    provided: component, redirectTo, children or loadChildren</p>
  </blockquote>
  
  <p>So I changed my route file into:</p>
  
  <pre><code>import { RouterModule, Routes } from '@angular/router';
  import { AppComponent } from './app.component';
  import { UdemyComponent } from './udemy/udemy.component';
  
  const appRoutes: Routes = [
      {path: 'udemy', component: UdemyComponent},
      {path: '', redirectTo:'/', component: AppComponent},
      {path: '**', component: AppComponent}
  ];
  </code></pre>
  
  <p>But the error didn't gone.</p>
  
  <p>I don't know why my code is not formatted correctly so I hope the admins can edit it.</p>