Je développe une application Angular 8 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: 4200, une page vierge apparaît.
Voici le fichier app-routing.module.ts
:
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; } }
Voici le fichier app.component.ts
:
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; }); } }
Voici le fichier login.component.ts
:
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']); } }
Éditer:
Voici le fichier auth.guard.ts
:
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 { }
Je m'attends à voir la page de connexion mais une page vierge apparaît après avoir tapé ng serve
et ouvert http: // localhost: 4200
9 Réponses :
Vous utilisez peut-être une version non prise en charge d'IE?
Essayez Chrome, un IE plus récent ou Firefox, etc. Vous pouvez également 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';
Je suis confronté au même problème, donc je rafraîchis simplement la page deux fois et cela fonctionne, mais vous pouvez essayer ceci, dans vos itinéraires si angular ne trouve aucune route que vous avez tapée, vous devez rediriger vers PageNotFoundComponent
, alors créez un composant PageNotFoundComponent
et redirigez vers ce composant car vous ne gérez pas tous les autres itinéraires autres que ceux que vous avez spécifiés
@NgModule({ imports: [ ... ... RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/ ], ... }) export class AppModule { }
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 développement et lorsque vous souhaitez publier, vous pouvez supprimer cette configuration { useHash: true }
{path: '**',redirectTo:''} // instead of this {path: '**', redirectTo:'PageNotFoundComponent'} // add this
Désolé mais j'ai essayé les deux solutions mais aucune des solutions ne fonctionne
Si vous avez besoin de plus de code, dites-le-moi et je modifierai la question et écrirai plus de code
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.
J'ai modifié la question et ajouté le fichier AuthGuard, pouvez-vous vérifier à nouveau le code?
Si vous avez besoin de plus de code, dites-le-moi et je modifierai la question et écrirai plus de code
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 recoupant d'autres navigateurs comme IE ou Safari.
Modifier: en plus de cela, essayez 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 que cela fonctionne, activez les extensions requises.
Ok, cela m'est arrivé et peut aider quelqu'un d'autre:
$ ng add @nestjs/ng-universal
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => { platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); }); });
Cela me donne une page vierge exécutant $ ng serve
sans erreur, sans message, sans rien, juste une page blanche et méchante.
Après avoir supprimé l'un des document.addEventListener( ...
wrappers, cela a fonctionné!
Merci, mon ami.
@guillefd, pour des raisons novices, j'ai besoin d'un condensé. Je devrais donc: 1) installer avec $ ng add @ nestjs / ng-universal 2) ajouter des importations à app.module comme indiqué au ng-universal repo 3) remplacer le code main.ts pour document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => { platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); }); });
Est-ce que c'est ça? Merci beaucoup d'avance
Si cela ne fonctionne pas, vérifiez la console de votre navigateur. L'erreur y est généralement affichée.
1.- Ouvrez les balises. Vérifiez si vous avez les balises correctement fermées dans les fichiers html. Dans mon cas, le problème était que dans un composant j'avais un </div>
supplémentaire.
2.- Entrées non déclarées. Vérifiez si vous essayez de passer une entrée qui n'est pas déclarée dans le composant, par exemple <app-component [var1]="123"> </app-component>
, dans votre composant vous devez obligatoirement avoir l'entrée déclarée @Input () var1;
3.- clés pour imprimer {{}}
vides dans un fichier html
4.- Propriétés non déclarées avec des balises angulaires. Par exemple dans un <input [anyWord]>
où [anyWord] n'est pas une entrée valide
Ce problème est très probablement lié à une erreur de code qui est exécutée 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
.
Vérifiez la console du navigateur, généralement, l'erreur y est affichée. S'il y a une erreur dans votre code, elle y sera affichée.
Quel était le problème? Je suppose que vous l'avez résolu maintenant et que j'ai le même problème aujourd'hui ...
voici ma solution , j'espère que ça aide
Vérifiez la console de votre navigateur, la cause de l'erreur y est généralement affichée.