Cannot match any routes: ''

Question

I have a defined route in angular2 application and receive such error:

Cannot match any routes: ''

export const routes: Routes = [{
  path: '',
  component: MainComponent,

  children: [{
    path: 'callCenter',
    component: CallCenterComponent,
    resolve: {
      countries: CountriesResolver
    },
  }, {
    path: 'vehicle',
    component: VehicleComponent,
    resolve: {
      vehicleCategories: VehicleCategoryResolver,
      vehicleOptions: VehicleOptionResolver
    },
  }, {
    path: 'territory',
    component: TerritoryComponent,
    resolve: {
      territoryOptions: TerritoryOptionResolver
    }
  },{
    path: 'token',
    component: TokenGenerationComponent
  }, {
    path: 'rider',
    component: RiderComponent
  }, {
    path: 'dispatch',
    component: DispatchSchemaComponent,
    resolve: {
      dispatchOrders: DispatchOrderResolver,
      dispatchModes: DispatchModeResolver
    }
  }]
}, {
  path: 'login',
  component: LoginComponent
}];

This is a code of my route config. I make it the same as in examples but it does not work, redirectTo property does not help also. default empty route does not loading. Could anyone help me?

Answer 1

I believe angular is expecting MainComponent child routes to have route with path ''.

 export const routes: Routes = [{
  path: '',
  component: MainComponent,

  children: [{
      path: '',
      component: SomeComponent
     },
     {
     path: 'callCenter',
     component: CallCenterComponent,
     resolve: {
      countries: CountriesResolver
    },
  }, {
    path: 'vehicle',
    component: VehicleComponent,
    resolve: {
      vehicleCategories: VehicleCategoryResolver,
      vehicleOptions: VehicleOptionResolver
    },
  }, {
    path: 'territory',
    component: TerritoryComponent,
    resolve: {
      territoryOptions: TerritoryOptionResolver
    }
  },{
    path: 'token',
    component: TokenGenerationComponent
  }, {
    path: 'rider',
    component: RiderComponent
  }, {
    path: 'dispatch',
    component: DispatchSchemaComponent,
    resolve: {
      dispatchOrders: DispatchOrderResolver,
      dispatchModes: DispatchModeResolver
    }
  }]
}, {
  path: 'login',
  component: LoginComponent
}];

Edit: With some redirecting

export const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    children: [
      {
        path: '',
        redirectTo: 'callCenter'
      },
      {
        path: 'callCenter',
        component: CallCenterComponent,
        resolve: {
          countries: CountriesResolver
        },
      }, {
        path: 'vehicle',
        component: VehicleComponent,
        resolve: {
          vehicleCategories: VehicleCategoryResolver,
          vehicleOptions: VehicleOptionResolver
        },
      }
    ...

Moving the MainComponent to child routes should also work

export const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: MainComponent
      },
      {
        path: 'callCenter',
        component: CallCenterComponent,
        resolve: {
          countries: CountriesResolver
        },
      }, {
        path: 'vehicle',
        component: VehicleComponent,
        resolve: {
          vehicleCategories: VehicleCategoryResolver,
          vehicleOptions: VehicleOptionResolver
        },
      }
    ...