1

Criei um novo modulo em minha aplicação com a minhas rotas e fiz os inports necessário em meu app.modules, porem no console do navegador da um erro o qual não consegui resolver e também não achei nenhuma resposta para o angular 5x.

O erro que da é:

ERROR Error: StaticInjectorError[ChildrenOutletContexts]: StaticInjectorError[ChildrenOutletContexts]:

Meu arquivo de rotas é:

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);

E meu app.module seria esse:

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 { }

Alguém tem alguma ideia de como resolver isso?

2 Respostas 2

1

Olá!

No seu app.module você deve importar o RouterModule já invocando o método forRoot(), conforme está abaixo:

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

Acredito que este é o problema. Espero ter ajudado.

0

Apesar de ter algum tempo já esta pergunta, o problema parece está no seu app.module, é como o Pedro Buzzi Filho disse, a invocação deve ser realizada no momento da importação dentro do seu 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 { }

Ou

Você no seu arquivo de rotas, inserir o ngModule, fazer as importações e exportação da sua classe:

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 { }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .