1
resposta

Como usar Rotas de funcionalidade e Rotas Raiz em conjunto?

Caros,

Estou com uma duvida/dificuldade na estrutura de roteamento do angular. Eu tenho a seguinte estrutura de pastas em meu projeto:

|__admin/
    |__ modulo-1/
    |__ modulo-2/
    |__admin.component.ts
    |__admin.component.html
    |__admin.module.ts
    |__admin.routing.module.ts
|__user/
    |__ modulo-1/
    |__ modulo-2/
    |__user.component.ts
    |__user.component.html
    |__user.module.ts
    |__user.routing.module.ts
|__shared/
|__app.component.ts
|__app.component.html
|__app.module.ts
|__app.routing.module.ts

Neste caso a minha rota raiz "app.routing.module.ts" tem como objetivo carregar o modulo "admin" e modulo "user", com o seguinte codigo:

const appRoutes: Routes = [
    {
        path: 'admin',
        component: AdminComponent
    },
    {
        path: 'user',
        component: UserComponent
    },
];

O codigo acima funciona corretamente, porem para deixar a aplicação mais organizada decidi também criar modulos de rotas de funcionalidade dentro da pasta "admin" e "user", que são respectivamente "admin.routing.module.ts" e "user.routing.module.ts".

Enfim tudo funciona corretamente mas eu tenho as seguintes duvidas, é correto a estrutura de roteamento que estou utilizando, criando um modulo de rota raiz para carregar apenas o modulo"user" e "admin", e dentro de cada um desses modulo ter um novo arquivo de rota declarado como "forChild()" carregando os demais componentes dentro do diretorio?

Outra duvida que tenho é referente ao uso de uma rota de erro que criei baseado na aula "Segmentos de Rotas", onde criei o seguinte codigo em minha rota raiz:

..........
......
...
{
        path: '**',
        component: NotfoundComponent
    },
];

Porem toda vez que utilizo o codigo acima na rota raiz, os modulos criados nas rotas de funcionalidade param de exisitir, elas simplesmente não são identificadas, acredito que esse "path" tenta encontrar a rota somente no arquivo raiz de rota e não no arquivo de rota de funcionalidade.

Como poderia resolver isso, a estrutura que utilizei esta correta?

Desde já agradeço.

1 resposta

Fala aí Vinicius, beleza? Vamos por partes:

  1. Acho muito válido essa separação de rotas em diferentes arquivos, nos meus projetos em React eu faço do mesmo jeito, cada feature minha tem sua pasta e dentro dela suas rotas e demais arquivos.

  2. Para a rota NotFound funcionar, ela deve ser a última á ser carregada pelo app.routing.module, nesse caso, se nenhuma funcionar e bater com a rota informada, a NotFound deve ser importada.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software