Módulos lazyloading só são carregados após eu fazer reload da pagina.
Em uma aplicação eu estou com um problema: quando realizo o login com sucesso, eu sou redirecionado para uma rota chamada 'dashboard', mas a partir daí quando tento acessar qualquer módulo preguiçoso, esse módulo não é carregado, nenhum erro ocorre, a URL muda tranquilamente o atributo do title também muda tranquilamente, mas o componente não é carregado na tela. Tudo volta ao normal se eu recarregar a página (F5), aí eu consigo acessar os módulos preguiçosos.
Resumindo: Quando eu logo na aplicação, se eu clicar em qualquer link que me leve a uma rota que carrega um módulo preguiçoso, o mesmo não é carregado.
Nenhum erro ocorre no console, e quando eu tento acessar esses módulos preguiçosos na aba network nenhuma requisição é feita para o chunck.
Os chunks estão sendo gerados perfeitamente.
Abaixo meu arquivo de rotas principal:
export const routes: Routes = [
{
path: 'dashboard',
component: SistemaComponent,
canActivate: [SistemaLiberadoGuard,
SistemaGuard],
data: {
title: 'dashboard'
}
},
{
path: 'login',
component: S4LoginComponent,
canActivate: [ LoginGuard ],
data: {
title: 'login'
}
},
{
path: 'usuarios',
loadChildren: './usuario-perfil-permissoes/usuario-perfil-permissoes.module#UsuarioPerfilPermissoesModule'
},
{
path: 'liberacaosistema',
loadChildren: './liberacao-sistema/liberacao-sistema.module#LiberacaoSistemaModule',
},
{
path: 'profileusuario',
loadChildren: './profile/profile.module#ProfileModule',
},
{
path: '',
pathMatch: 'full',
redirectTo: 'dashboard'
},
{
path: '**',
component: S4NotFoundComponent,
data: {
title: 'Page Not Found'
}
}
]
@NgModule({
imports: [
RouterModule.forRoot(routes, { useHash: true })
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Abaixo o arquivo de rotas de um dos módulos que estão sendo carregados preguiçosamente:
export const routes: Routes = [
{
path: '',
component: ProfileComponent,
canActivate: [SistemaGuard],
data: {
title: 'Profile'
}
}
]
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class ProfileRoutingModule {
}
Abaixo meu app.module
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AccordionModule,
ButtonModule,
ScrollPanelModule,
BrowserAnimationsModule,
CoreModule,
SistemaModule,
LoadingModule,
AppRoutingModule,
ErrorsModule,
],
declarations: [
AppComponent,
AppMenuComponent,
AppSubMenuComponent,
],
providers: [
{provide: LocationStrategy, useClass: HashLocationStrategy},
],
bootstrap: [AppComponent]
})
export class AppModule { }
Abaixo meu método de login :
login() {
const userName = this.loginForm.get('userName').value;
const password = this.loginForm.get('password').value;
this.autenticacaoService.autenticar(userName, password)
.subscribe(() => {
this.router.navigate(['', 'dashboard']);
},
err => {
this.showMessage('error', 'dados de login inválidos');
this.loginForm.reset();
this.platformDetectorService.isPlatformBrowser() && this.userNameInput.nativeElement.focus();
})
}