使用Angular8的路由守卫功能报错,具体如下:

  1. core.js:6014 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[LoginGuard]:
  2. StaticInjectorError(Platform: core)[LoginGuard]:
  3. NullInjectorError: No provider for LoginGuard!
  4. NullInjectorError: StaticInjectorError(AppModule)[LoginGuard]:
  5. StaticInjectorError(Platform: core)[LoginGuard]:
  6. NullInjectorError: No provider for LoginGuard!
  7. at NullInjector.get (core.js:855)
  8. at resolveToken (core.js:17514)
  9. at tryResolveToken (core.js:17440)
  10. at StaticInjector.get (core.js:17266)
  11. at resolveToken (core.js:17514)
  12. at tryResolveToken (core.js:17440)
  13. at StaticInjector.get (core.js:17266)
  14. at resolveNgModuleDep (core.js:30393)
  15. at NgModuleRef_.get (core.js:31578)
  16. at resolveNgModuleDep (core.js:30393)
  17. at resolvePromise (zone-evergreen.js:797)
  18. at resolvePromise (zone-evergreen.js:754)
  19. at zone-evergreen.js:858
  20. at ZoneDelegate.invokeTask (zone-evergreen.js:391)
  21. at Object.onInvokeTask (core.js:39680)
  22. at ZoneDelegate.invokeTask (zone-evergreen.js:390)
  23. at Zone.runTask (zone-evergreen.js:168)
  24. at drainMicroTaskQueue (zone-evergreen.js:559)

admin-routing.module 具体代码 :

  1. import { NgModule } from '@angular/core';
  2. import { Routes, RouterModule } from '@angular/router';
  3. import { IndexComponent } from '../admin/index/index.component';
  4. import { AdminComponent } from './admin.component';
  5. import { LoginGuard } from '../common-share/guard/login.guard';
  6. const routes: Routes = [
  7. {
  8. path: '',
  9. component: AdminComponent,
  10. children: [
  11. {
  12. path: '',
  13. redirectTo: 'index',
  14. pathMatch: 'full'
  15. },
  16. {
  17. path: 'index',
  18. component: IndexComponent,
  19. canActivate: [LoginGuard]
  20. },
  21. ]
  22. }
  23. ];
  24. @NgModule({
  25. imports: [RouterModule.forChild(routes)],
  26. exports: [RouterModule],
  27. })
  28. export class AdminRoutingModule { }

路由守卫代码:

  1. import {ActivatedRoute, CanActivate, Router} from '@angular/router';
  2. import { AuthService } from '../api/auth/auth.service';
  3. import { Injectable } from '@angular/core';
  4. /**
  5. * 检查登录
  6. */
  7. @Injectable()
  8. export class LoginGuard implements CanActivate{
  9. constructor(private auth: AuthService,private router: Router, private route: ActivatedRoute) {
  10. }
  11. canActivate(){
  12. //检查登录
  13. if(!this.auth.checkHasLogin()){
  14. this.router.navigate(['/login'], {
  15. relativeTo: this.route
  16. });
  17. };
  18. return true;
  19. }
  20. }

具体是说我这个LoginGuard没有注入,然后找不到这个守卫

网上解决办法:
  • 导入HttpClientModule import { HttpClientModule } from '@angular/common/http';

检查发现我已经导入了,所以不可能是这个问题


后面检查才发现是,我确实没有注入,我没有在admin-routing.module 里面把LoginGuard加入providers里面,导致找不到。

具体解决办法,在admin-routing.module providers里面加入LoginGuard
  1. @NgModule({
  2. imports: [RouterModule.forChild(routes)],
  3. exports: [RouterModule],
  4. providers: [LoginGuard]
  5. })