Colisão de rotas

A título de informação: Caso tenha rotas com wildcards (coringas) onde esses coringas podem ser qualquer coisa. Tenha cuidado, pois caso você definir no arquivo de rotas desta forma:

{ 
    path: 'p/:photoId', 
    component: PhotoDetailsComponent
},
{ 
    path: 'p/add', 
    component: PhotoFormComponent,
    canActivate: [AuthGuard]
}

Terá um erro no console. Isso acontece porque quando o Angular vai avaliar para qual a rota queremos acessar ele "lê" esse arquivo "de cima para baixo".

Suponhamos que queremos acessar a rota p/add. O que Angular fará por debaixo dos panos:

1. Avaliar seu arquivo de rotas (de cima para baixo) e verificar se possui alguma rota correspondente a que você deseja acessar.
2. A primeira que ele encontrar, no caso p/:photoIdonde o photoId pode ser qualquer coisa, inclusive, add é esta rota que será ativada. Com isso, seremos redirecionado para uma rota diferente da que queríamos.

SOLUÇÃO:

{ 
    path: 'p/add', 
    component: PhotoFormComponent,
    canActivate: [AuthGuard]
},
{ 
    path: 'p/edit', 
    component: PhotoFormComponent,
    canActivate: [AuthGuard]
},
{ 
    path: 'p/:photoId', 
    component: PhotoDetailsComponent
},