web-dev-qa-db-fra.com

Angular 8 montrant une page vierge sans erreur

Je développe une Angular 8 application qui se connectera à une API .Net Core Rest à l'aide de l'authentification par jeton JWT.

Lorsque je démarre l'application, l'application se compile avec succès sans erreur. Cependant, lorsque j'ouvre http: // localhost: 42 une page vierge apparaît.

Voici la app-routing.module.ts fichier:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login';
import { HomeComponent } from './home';
import { AppComponent } from './app.component';
import { AuthGuard } from './_helpers';

const routes: Routes = [
  {path: '',component:AppComponent,canActivate: [AuthGuard]},
  {path:'login',component:LoginComponent},
  {path: '**',redirectTo:''}
];

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

Voici la app.component.ts fichier:

import { Component ,ViewChild,OnInit } from '@angular/core';
import { ApiService } from './api.service';
import { Router } from '@angular/router';
import {Sort} from '@angular/material';
import { Log } from './log';
import {MatPaginator,MatSort,MatTableDataSource} from '@angular/material';

import { AuthenticationService } from './_services';
import { User } from './_models';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  currentUser: User;
  public isViewable:boolean;

  constructor(private apiService: ApiService,private router: Router,private authenticationService: AuthenticationService){
    this.authenticationService.currentUser.subscribe(x => this.currentUser = x);
  }

  dataSource=new MatTableDataSource<Log>();
  displayedColumns: string[] = ['message','create_Date','log_Type'];

  @ViewChild(MatSort,{static:true}) sort: MatSort;

  ngOnInit(){
    this.dataSource.sort=this.sort;

    this.apiService.getLogs().subscribe((res)=>{
      this.dataSource.data=res;    
    });
   }


   public onSortData(sort:Sort){
    let data=this.dataSource.data.slice();
    if(sort.active && sort.direction!==''){
      data=data.sort((a:Log,b:Log)=>{
          const isAsc=sort.direction==='asc';
          switch(sort.active){
            case 'message': return this.compare(a.message,b.message,isAsc);
            case 'create_Date':return this.compare(a.create_Date,b.create_Date,isAsc);
            case 'log_Type':return this.compare(a.log_Type,b.log_Type,isAsc);
            default: return 0;
          }
      });    
    }
    this.dataSource.data=data; 
   }

   private compare(a,b,isAsc){
    return (a.toLowerCase() < b.toLowerCase()  ? -1 : 1) * (isAsc ? 1:-1);
   }

  public toggle():void{
    this.isViewable=!this.isViewable;

    this.apiService.getLogs().subscribe((res)=>{
      this.dataSource.data=res;
     });

    }

    logout() {
      this.authenticationService.logout();
      this.router.navigate(['/login']);
    }
  }

Voici la login.component.ts fichier:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';

import { AuthenticationService } from '../_services';

@Component({ templateUrl: 'login.component.html' })
export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    loading = false;
    submitted = false;
    returnUrl: string;
    error = '';

    constructor(
        private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService
    ) { 
        // redirect to home if already logged in
        if (this.authenticationService.currentUserValue) { 
            this.router.navigate(['/']);
        }
    }

    ngOnInit() {
        this.loginForm = this.formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required]
        });

        // get return url from route parameters or default to '/'
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
    }

    // convenience getter for easy access to form fields
    get f() { return this.loginForm.controls; }

    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.loginForm.invalid) {
            return;
        }

        this.loading = true;
        this.authenticationService.login(this.f.username.value, this.f.password.value)
            .pipe(first())
            .subscribe(
                data => {
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    this.error = error;
                    this.loading = false;
                });
    }
}

Éditer:

Voici la auth.guard.ts fichier:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { AuthenticationService } from '../_services';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
    constructor(
        private router: Router,
        private authenticationService: AuthenticationService
    ) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const currentUser = this.authenticationService.currentUserValue;
        if (currentUser) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        return false;
    }
}

Je m'attends à voir la page de connexion mais une page vierge apparaît après avoir tapé ng serve et ouvrez http: // localhost: 42

angularangular8
6
freelancer86

Récemment, j'ai rencontré le même problème dans le navigateur chrome, après la mise à jour de la version chrome, ce problème a été résolu. Vous pouvez vérifier ce problème lié au navigateur ou non, en recoupement dans d'autres navigateurs comme IE ou Safari.

Edit: En plus de cela, veuillez essayer de désactiver certaines extensions dans Chrome. Assurez-vous de redémarrer le navigateur une fois que vous avez désactivé les extensions. Une fois qu'il fonctionne, activez les extensions requises.

0
Kishor K

Ce problème est probablement lié à une erreur de code qui s'exécute lors du lancement de l'application. Cela inclut très probablement le lancement de tout type de module d'authentification.

Vérifiez/déboguez votre app.module.ts et toutes les choses appelées à partir de là - comme APP_INITIALIZER.

0
Yuri

Vous utilisez peut-être une version non prise en charge d'IE?

Essayez Chrome, une version ultérieure IE ou Firefox, etc. Alternativement, vous pouvez décommenter les polyfills du navigateur dans polyfills.ts

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/array';
import 'core-js/es6/date';
import 'core-js/es6/function';
import 'core-js/es6/map';
import 'core-js/es6/math';
import 'core-js/es6/number';
import 'core-js/es6/object';
import 'core-js/es6/parse-float';
import 'core-js/es6/parse-int';
import 'core-js/es6/regexp';
import 'core-js/es6/set';
import 'core-js/es6/string';
import 'core-js/es6/symbol';
import 'core-js/es6/weak-map';
0
Robin Webb

Je fais face au même problème, donc je rafraîchis simplement la page deux fois et cela fonctionne, mais vous pouvez essayer cela, dans vos itinéraires si angular ne peut pas trouver les itinéraires que vous avez tapés sur vous, vous devrez rediriger vers PageNotFoundComponent, créez donc un composant PageNotFoundComponent et redirigez-le vers ce composant car vous ne gérez aucune autre route que celles que vous avez spécifiées

 {path: '**',redirectTo:''} // instead of this 
 {path: '**', redirectTo:'PageNotFoundComponent'} // add this

Ou vous pouvez essayer ceci avec { useHash: true } dans routerConfig et toutes les routes utiliseront #/login et vous pouvez l'utiliser uniquement pour le mode de développement et lorsque vous souhaitez publier, vous pouvez supprimer cette configuration { useHash: true }

@NgModule({
  imports: [
    ...
    ...
    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
  ],
  ...
})
export class AppModule { }
0
Stefan Morcodeanu

Veuillez vérifier votre "AuthGuard". Vérifiez si son retour est vrai. Puisque votre racine par défaut a été protégée et si elle retourne false, je pense que c'est pourquoi votre page ne se charge pas.

0
Andrew Rayan