1
resposta

Rotas Filhas funcionam Local mas não em outro ambiente

Criei as minhas rotas filhas conforme o ensinado nessa Aula. Tudo funciona perfeitamente no meu ambiente local. Porém quando faço deploy e testo em outro ambiente ocorrem comportamentos estranhos.

Exemplos:

Acessar o endereço http://localhost:4200/projeto/principal - funciona normalmente

Acessar o endereço http://meu-ambiente.com/projeto/principal - Não acessa ( só acessa se eu acessar diretamente o contexto sem nenhum filho (/projeto) )

Se eu estiver em http://meu-ambiente.com/projeto/relatorios/demonstrativo e acessar (via routerLink) o endereço http://meu-ambiente.com/projeto/controle/manter ocorre o erro: Not found e Loading chunk controle.module failed (Parece que tenta achar a rota de controle dentro da rota de relatorios)

Ou seja, claramente as rotas não estão funcionando como deveriam no ambiente de teste e no meu ambiente local funcionam.

Tanto no meu ambiente local quanto o ambiente que ocorre o erro, estou usando o Angular junto com um servidor JBOSS e Java Rest. No ambiente local eu subo o servidor back-end e o servidor front-end. No ambiente de teste, tenho um job no jenkins que empacota todo o conteúdo no .war e faz o deploy.

Abaixo envio o meu conteúdo de rotas.

Alguém sabe o que pode estar errado?

app.routing.module.ts:

const routes: Routes = [
    { path: '', redirectTo: 'principal', pathMatch: 'full' },

    { 
      path: 'relatorios',
      loadChildren: './components/pages/relatorios/relatorios.module#RelatoriosModule'
    },
    { 
        path: 'controle',
        loadChildren: './components/pages/controle/controle.module#ControleModule'
    },

    { path: 'principal', component: PrincipalComponent, data: { titulo: 'Principal' } },
    { path: '**', component: PrincipalComponent }
];

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

controle.routing.module.ts:

const routes: Routes = [
    {
        path: '',
        component: ControleComponent,
        children: [
            {
                path: 'manter',
                component: ManterComponent,
                data: { label: 'Manter' }
            }
        ]
    }
];

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

relatorios.routing.module.ts:

const routes: Routes = [
    {
        path: '',
        component: RelatoriosComponent,
        children: [
            {
                path: 'demonstrativo',
                component: DemonstrativoComponent,
                data: { titulo: 'Demonstrativo' }
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ]
})
export class RelatoriosRoutingModule { }
1 resposta

Fala aí Victor, tudo bem? O problema deve estar na forma que fez o deploy da aplicação.

No seu caso, provavelmente o servidor que prove a aplicação não conhece/tem a rota /projeto/principal (por exemplo).

Para resolver o problema, você precisa mapear as rotas do projeto e sempre devolver o index.html.

Essa correção depende de cada servidor container que você está utilizando.

Espero ter ajudado.