[Dúvida] Erro na rota de novo animal

Propositalmente coloquei a rora de novo animal de pois da rota do componente DetalheAnimal. Assim:

const routes: Routes = [
  {
    path: '',
    component: ListaAnimaisComponent,
    resolve:{
      animais: ListaAnimaisResolver
    }
  },
  {
    path: ':animalId',
    component: DetalheAnimalComponent
  },
  {
    path: 'novo',
    component: NovoAnimalComponent
  }
];

levei em consideração que essa rota deveria estar por último por ter sido assim incluída(por último), e não funcionou, chamou o componente mas não renderizou a página. Somente quando fiz como na aula assim:

const routes: Routes = [
  {
    path: '',
    component: ListaAnimaisComponent,
    resolve:{
      animais: ListaAnimaisResolver
    }
  },
  {
    path: 'novo',
    component: NovoAnimalComponent
  },
  {
    path: ':animalId',
    component: DetalheAnimalComponent
  }
];

Funcionou. Poderia me dizer porque teria que manter essa ordem?