Problem with angled routes 5x

Question

Problem with angled routes 5x

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I created a new module in my application with my routes and made the necessary inports in my app.modules, but in the browser console there was an error which I could not solve and I also did not find any response for the 5x angle.

The error that gives is:

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

My route file 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 my app.module would be this:

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 solve this?

angular angular-routes

asked by anonymous 30.11.2017 / 01:10

2 answers

l5-repository Package Validators How to search for something in 100% of MySQL database

score 1 · Answer 1

Hello

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

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

I believe this is the problem. I hope I have helped.

score 0 · Answer 2

Despite having some time already this question, the problem seems to be in its app.module , it's like the Pedro Buzzi Filho , the invocation should be performed at the time of import within its 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 ngModule , import and export your 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 { }