Angular 6: cannot macht routes (nested)

Question

I have this very simple project to test nested routing. The app-routes work, but not the children "cannot match any routes", says the error. Checked other answers but the versions made me confused. Here's what I have:

APP.MODULE.TS

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CountriesModule } from './countries/countries/countries.module';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { AdressComponent} from './adress/adress.component';
@NgModule({
  declarations: [AppComponent, AdressComponent],
  imports: [BrowserModule, AppRoutingModule, CountriesModule, RouterModule ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

App.Routing,Module.TS

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdressComponent } from './adress/adress.component';
import { CountriesComponent } from './countries/countries/countries.component';

export const routes: Routes = [
  {
    path: '',
    component: AdressComponent
  },
  {
    path: 'country',
    component: CountriesComponent
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

Countries.Module (nested)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CountriesComponent } from './countries.component';
import { AddCountryComponent } from './add-country/add-country.component';
import { CountryListComponentComponent } from './country-list-component/country-list-component.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    CountriesComponent,
    AddCountryComponent,
    CountryListComponentComponent
  ],
  imports: [CommonModule, RouterModule]
})
export class CountriesModule {}

Routing:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CountriesComponent } from './countries.component';
import { AddCountryComponent } from './add-country/add-country.component';
import { CountryListComponentComponent } from './country-list-component/country-list-component.component';

export const countryRoutes: Routes = [
  {
    path: 'country',
    component: CountriesComponent,
    children: [
      {
        path: 'add',
        component: AddCountryComponent
      },
      {
        path: 'list',
        component: CountryListComponentComponent
      }
    ]
  }
];

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

HTML (countries)

<a [routerLink]="['/country/list/']" routerLinkActive="active">List</a>

EDIT: @Maihan Nijat

The project in StackBlitz: https://stackblitz.com/edit/angular-rsj8qd

Remove the `country` route from the `AppRoutingModule` routes — Jota.Toledo, Nov 27 '18 at 13:07
use path as "country/list" in Routing and there is an extra "/" in your List — chethu, Nov 27 '18 at 13:10
this path `Country ` dos not work either. It has to be a sctructural issue — Mellville, Nov 27 '18 at 13:16
How can I remove ountry from appModule? Its on the top level, its a parent route — Mellville, Nov 27 '18 at 13:18
and with this path `Country ` the error is something like `Cannot match any routes. URL Segment: 'country/country/list'` — Mellville, Nov 27 '18 at 13:22
if that is the case use like this { path: '', component: CountriesComponent, children: [ { path: 'country/add', component: AddCountryComponent }, { path: 'country/list', component: CountryListComponentComponent } ] } — chethu, Nov 27 '18 at 13:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/184362/discussion-between-chethu-and-mellville). — chethu, Nov 28 '18 at 04:02

score 0 · Answer 1 · answered Nov 27 '18 at 12:59

0

It should be just list, remove the last backslash from the routerLink

<a [routerLink]="['/country/list']

answered Nov 27 '18 at 12:59

Sajeetharan

216,225
63
350
396

I don't think so...`Country ` gives me the same error, Sajeetharan – Mellville Nov 27 '18 at 13:03

Maihan Nijat · Answer 2 · 2018-11-27T13:53:06.917

0

App Routing Modules:

Edit the path app/countries.module#CountriesModule' to match your path. Go through paths in the code before testing it.

const routes: Routes = [
  {path: 'country', loadChildren: 'app/countries/countries/countries.module#CountriesModule'},
  {path: '', component: AdressComponent},
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

Country Routing:

const routes: Routes = [
  {
    path: '',
    component: CountriesComponent,
    children: [
      {
        path: 'add',
        component: AddCountryComponent
      },
      {
        path: 'list',
        component: CountryListComponentComponent
      }
    ]
  }
];

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

export const routedComponents = [
  CountriesComponent,
  CountryListComponentComponent,
  AddCountryComponent,
];

Country Module:

@NgModule({
  declarations: [...routedComponents],
  imports: [CommonModule, RouterModule, CountryRoutingModule],
})
export class CountriesModule {}

edited Nov 27 '18 at 13:53

answered Nov 27 '18 at 13:22

Maihan Nijat

9,054
11
62
110

I'm sorry but with this change: `const routes: Routes = [ { path: 'country', loadChildren: 'app/countries.module#CountriesModule' }, { path: '', component: AdressComponent }, ];` i get the error `Error: Cannot find module 'app/countries.module'` Now Im lost :) – Mellville Nov 27 '18 at 13:36
the error remains `Cannot find module 'app/countries/countries/countries.module'`.... – Mellville Nov 27 '18 at 14:05
@Mellville create your project here,so I help you https://stackblitz.com – Maihan Nijat Nov 27 '18 at 14:10
Ok @Maihan, I will do it later, now I have to move, and thakns for your help! – Mellville Nov 27 '18 at 14:33
the project is here: https://angular-jccrbc.stackblitz.io Its a bit different, I cant see red lines, so everything is messed up - i just copyed and pasted – Mellville Nov 28 '18 at 20:46

Angular 6: cannot macht routes (nested)

2 Answers2