Problem with angular 5x routes

Question

I created a new module in my application with my routes and made the required inports in my app.modules, but in the browser console an error which I could not solve and also found no answer for the angular 5x.

The mistake that is:

ERROR Error: Staticinjectorerror[Childrenoutletcontexts]: StaticInjectorError[ChildrenOutletContexts]:

My file of routes is:

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

import { CursosComponent } from './cursos/cursos.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

const APP_ROUTES: Routes = [
    { path: 'cursos', component: CursosComponent },
    { path: 'login', component: LoginComponent },
    { path: '', component: HomeComponent }
];

const routing: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);

And that would be my app.module:

import { BrowserModule } from '@angular/platform-browser';
import { MaterializeModule } from 'angular2-materialize';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { CursosComponent } from './cursos/cursos.component';
import { RouterModule, Routes } from '@angular/router';


@NgModule({
        declarations: [
                AppComponent,
                HomeComponent,
                LoginComponent,
                CursosComponent
        ],
    imports: [
        BrowserModule,
        RouterModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Does anyone have any idea how to fix this?

Answer 1

Hello!

In your app.module you should import the Routermodule already invoking the forRoot() method, as shown below:

imports: [
    BrowserModule,
    RouterModule.forRoot(APP_ROUTES)
]

I believe that’s the problem. I hope I’ve helped.

Answer 2

Despite having some time already this question, the problem seems to be in your app.module, is like the Pedro Buzzi Filho said, the invocation must be performed at the time of import within your app.module.

import { BrowserModule } from '@angular/platform-browser';
import { MaterializeModule } from 'angular2-materialize';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { CursosComponent } from './cursos/cursos.component';
import { RouterModule, Routes } from '@angular/router';


@NgModule({
        declarations: [
                AppComponent,
                HomeComponent,
                LoginComponent,
                CursosComponent
        ],
    imports: [
        BrowserModule,
        RouterModule.forRoot(APP_ROUTES)
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Or

You in your route file, enter the ngModule, make the imports and exports of its class:

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

import { CursosComponent } from './cursos/cursos.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

const APP_ROUTES: Routes = [
    { path: 'cursos', component: CursosComponent },
    { path: 'login', component: LoginComponent },
    { path: '', component: HomeComponent }
];

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

export class AppRoutingModule { }