Маршрутизатор Angular 6 не может перейти к первому отложенному загрузочному модулю при начальной навигации сразу после успешного входа - PullRequest
Новая
       6

Маршрутизатор Angular 6 не может перейти к первому отложенному загрузочному модулю при начальной навигации сразу после успешного входа

0 голосов
/ 08 сентября 2018

Я не мог понять, почему угловой маршрутизатор игнорирует / пропускает навигацию маршрутизатора только после успешного входа в систему. Поведение аналогично тому, как маршрутизатор игнорирует первую загрузку. Я пробовал тайм-аут тоже. Если нужен какой-либо другой код, пожалуйста, пингуйте меня. Все работает нормально, но при первой загрузке возникает эта ошибка. Здесь auth.guard.ts. 

export class AuthGuard implements CanActivate {
private token;

constructor(
    private router: Router,
    private authService: AuthService,
    private tokenId: SessionService
) {
    this.token = this.tokenId.token;
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.token) {
        return true;
    }
    this.router.navigateByUrl('/login');
    return false;
}

вот login.component.ts 

  public async login(data) {
await this.authService.login(data)
  .subscribe((res) => {
    // this.router.navigateByUrl(this.router.createUrlTree(['/']));
    // this.zone.run(() => this.router.navigate(['/']));
    this.router.navigate(['/']);   <======= **this line of code get skipped. I have also tried using async await and setTimeout but nothing works**
  },
    (err) => console.log(err)
  );

}

тоже пробовал это 

 // login(data) {
 //   let promise = new Promise((resolve, reject) => {
 //     this.authService.login(data)
 //       .then(async (response) => {
 //         await resolve();
 //         await this.router.navigateByUrl('/');
 //       },
 //         error => {
 //           reject(error);
 //         }
 //       );
 //   });
 //   return promise;
 // }

текущий метод входа в систему как auth.service.ts 

public login(data): Observable<any> {
const response = this.http.post(`${localNetwork.apiUrl}/login`, data)
  .pipe(
    map(async res => {
      return res;
    }),
    retry(3),
    catchError(this.handleError)
  );
return response;
}
    // also tried login using promises
// login(data) {
//   this.loader.loading = true;
//   let promise = new Promise((resolve, reject) => {
//     this.http.post(`${localNetwork.apiUrl}/login`, data)
//       .toPromise()
//       .then(
//         async res => {
//           resolve();
//         },
//         error => {
//           reject(error);
//           error = this.handleError;
//         }
//       );
//   });
//   return promise;
// }

private handleError(error: HttpErrorResponse) {
let errMsg = (error.message) ? error.message : error.status ?        `${error.status} - ${error.statusText}` : 'Server error';
return throwError(errMsg);

}

Я использую угловой v6. Когда пользователь получает доступ к приложению первым после успешного входа, маршрутизатор не переходит на лениво загруженный модуль

корневой маршрутизатор выглядит следующим образом 

const routes: Routes = [
{
path: '',
loadChildren: './dashboard/dashboard.module#DashboardModule',
// loadChildren: () => DashboardModule,   <===== also tried this but it having issue: Error as no compiler option
canActivate: [AuthGuard]
},
{
path: 'login',
component: LoginComponent,
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
},
{ path: '**', redirectTo: '' }

];

Ленивый загруженный модуль маршрутизации как dashboard_routing.module.ts 

  const routes: Routes = [
  {
  path: '',
  component: DashboardComponent,
  children: [
  {
    path: '',
    component: HomeComponent,
  },
 ....... <== other routes here
 ]
 }
 ];
 @NgModule({
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule]
 })
 export class DashboardRoutingModule { }

Модуль панели мониторинга как dashboard.module.ts 

+imports
 @NgModule({
imports: [
CommonModule,
 ........ <=== other module here
DashboardRoutingModule
   ],
declarations: [
DashboardComponent,
HomeComponent,
],
})
export class DashboardModule { }

Я также проверил связанную проблему в другой версии. В ожидании лучшего решения. Если требуется какой-либо связанный запрос, пожалуйста, напишите мне.

...