Ordem do router do animal

Fazendo o projeto eu tive um problema ao clicar na opção de novo animal. Quando eu implementei o componente do novo animal no router ficou da seguinte forma

import { NovoAnimalComponent } from './novo-animal/novo-animal.component';
import { ListaAnimaisResolver } from './lista-animais/lista-animais.resolver';
import { DetalheAnimalComponent } from './detalhe-animal/detalhe-animal.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListaAnimaisComponent } from './lista-animais/lista-animais.component';

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

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

com o path novo após o path do detalhe animal. O problema é que dessa forma mesmo que eu clique no Link Novo Animal acaba sendo redirecionado para o componente do detalheAnimalComponente. Qual a razão pra isso acontecer ?

Após mudar a ordem o componente foi mostrado normalmente

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