2

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();
    })
  }
5
  • Oi Lucio pode editar sua pergunta adicionando o seu app.module? 26/06/2019 às 18:16
  • Se vc tirar o guard e tentar acessar ele funciona?? 26/06/2019 às 18:50
  • Não. já tentei também, o que acontece é que tudo funciona normalmente se eu fizer o reload da página 26/06/2019 às 19:00
  • me parece que a sua configuração da sua rota está certa. Edita com o código de como vc faz pra navegar pra pagina. 26/06/2019 às 20:41
  • Atualizei, Eduardo. Coloquei meu método de login 27/06/2019 às 14:35

1 Resposta 1

-1

Se eu entendi bem o teu código, falta carregar o componente no módulo.

Dê uma olhada neste código para ver se te ajuda:

App.routing

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MenuComponent } from './menu/menu.component';

const routes: Routes = [
  {path: '', component: MenuComponent},
  {path: 'triagem', loadChildren: './triagem/triagem.module#TriagemModule'},
  {path: 'setor', loadChildren: './setor/setor.module#SetorModule'},
  {path: 'rotas', loadChildren: './rotas/rotas.module#RotasModule'},
];

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

App.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

E nos componentes ficaria assim: setor-routing

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SetorComponent } from './setor.component';
import { SetorFormComponent } from './setor-form/setor-form.component';

const routes: Routes = [
  {path: '', component: SetorComponent},
  {path: 'new', component: SetorFormComponent},
  {path: 'edit/:id', component: SetorFormComponent},
];

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

Setor.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from 'src/app/compartilhado/shared/shared.module';
import { CalendarModule } from 'primeng/calendar';
import {InputTextareaModule} from 'primeng/inputtextarea';

import { SetorRoutingModule } from './setor-routing.module';
import { SetorComponent } from './setor.component';
import { SetorFormComponent } from './setor-form/setor-form.component';

@NgModule({
  declarations: [SetorComponent, SetorFormComponent],
  imports: [
    CommonModule,
    SetorRoutingModule,
    ReactiveFormsModule,
    SharedModule,
    CalendarModule,
    InputTextareaModule,
  ]
})
export class SetorModule { }

Rotas dentro do Setor.component.ts

onCreate() {
    this.router.navigate(['setor/new']);
  }

  onEdit(id) {
    this.router.navigate(['setor/edit/'+id]);
  }
6
  • Edward, comparando com o seu codigo postado não consegui perceber a diferença, poderia por favor me indicar onde não estou carregando o componente ? 26/06/2019 às 17:51
  • Por exemplo, no Setor.module, tem o SetorComponent importado e no Setor-routing também. No seu projeto, o componente está importado no módulo e no routing? 26/06/2019 às 19:04
  • Viu se a tua url muda? As vezes /site/dashboard/home é diferente de /site/home 27/06/2019 às 18:17
  • Sim, meus componentes estão importados nos modulo e no routing. Minha URL muda também, mas ela esta definida corretamente. 27/06/2019 às 22:13
  • No teu login, tu redireciona para '' e 'dashboard', não teria que ser apenas um deles? this.router.navigate(['', 'dashboard']); 28/06/2019 às 11:37

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .