Angular 7 nested routes, Cannot match any routes. URL Segment error

2
votes

I am trying to change the routing of an existing app. The app has many concepts I don't have under my belt like lazy loading and advanced routing techniques, so I hope someone can help me.

I have the following hierarchy:

 components(folder)
    operador (component)
       criar (component)
       atualizar (component)
       operador.module.routing.ts

Operador.module.routing.ts is like this

 const routes: Routes = [
  {path: '', component:  OperadorComponent,

  children: [
    {path: 'criar', component: CriarComponent}

  ]
},

 ];

 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
})
 export class OperadorRoutingModule {

}

When I have a router like like this in the operador component it won't navigate to the criar component.

  <a routerLink="criar" >

I got the following erro on Chrome:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dash/operadores/criar' Error: Cannot match any routes. URL Segment: 'dash/operadores/criar' at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError

Edited to include more code.

I have the following file on the root of the app, app-routing.module.ts.

   import { HomeComponent } from './components/home/home.component';
   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';


const appRoutes: Routes = [ 
 {path: '', loadChildren: 'src/app/components/entrar- 
app/entrarapp.module#EntrarModule'},
  {path: 'dash', component: HomeComponent},

];

@NgModule({
   imports:[RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
 })
 export class AppRoutingModule{}
2
angular
where do you load the operador.routing.module so which route is pointing there? I would want to give u a general advice to write ur code in english, as its more maintainable and readable to ppl around the world. regards - sagat

2 Answers

0
votes

Try <a routerLink="../criar" > the original is trying to locate 'dash/operadores/criar' instead of 'dash/criar' so it needs the '../' to navigate one directory below on the current route (I believe that is the correct route based on what is posted).

0
votes

So I created one that works for you.

app-routing.module.ts

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

const routes: Routes = [ 
{path: '', loadChildren: () => 
     import('./entrarapp/entrarapp.module').then(m => m.EntrarModule)}
];

@NgModule({
  imports: [
       RouterModule.forRoot(routes)],
  providers: [],
  declarations: [
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

entrarapp-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { OperadorComponent } from './operador/operador.component';
import { CriarComponent } from './criar/criar.component';
import { TestComponent } from './test/test.component';

 const routes: Routes = [
  {path: '', component:  OperadorComponent,
    children: [
      {path: '', component: TestComponent},
      {path: 'criar', component: CriarComponent}
    ]
},
 ];


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports:[RouterModule],
  declarations: []
})
export class EntrarAppRoutingModule { }

operador.component.html

  <a routerLink="/criar" >Criar</a>
    <router-outlet></router-outlet>

You can find the working sample here