Angular 6: Uncaught (in promise): Error: StaticInjectorError(AppModule)[RoleGuardService]

Question

我想在我的 Angular 6 项目之一中使用 RoleGuard 服务。我在“_guards”文件夹下创建了一个文件——“role-guard.service.ts”。现在在路由文件中，我已经声明了与下面相同的内容并尝试实现相同的内容。请注意，我有一个共享模块，但我没有在导出中声明 roleguardservice。

import { RoleGuardService } from '../../_guards/role-guard.service';
const routes: Routes = [
    { path: 'edit-account-info', component: EditAccountInfoComponent, canActivate: [RoleGuardService] },
    ....
    ....
    ]
}

下面是我的app.module.ts file:

import { AuthGuard, DisableAuthGuard} from '../../_guards/auth.guard';
....
....
exports : [
    // 
  ],
  providers: [AuthGuard, DisableAuthGuard, {
    provide: RECAPTCHA_SETTINGS,
    useValue: {
      siteKey: environment.recaptchasiteKey,
    } as RecaptchaSettings,
  }]

我想根据用户角色更改路由。比如，如果用户角色类型 1，那么他将重定向到 "edit-account-info"，否则（如果用户角色类型 2）他将重定向到 "agent/edit-account-info"。如果用户角色类型 2 想要访问路径 "edit-account-info"，他将转到 "unauthorize" 页面。

但是为了实现它，当我想访问页面 "edit-account-info" 时，它显示错误：

Uncaught (in promise): Error: StaticInjectorError(AppModule)[RoleGuardService]: StaticInjectorError(Platform: core)[RoleGuardService]: NullInjectorError: No provider for RoleGuardService! Error: StaticInjectorError(AppModule)[RoleGuardService]: StaticInjectorError(Platform: core)[RoleGuardService]: NullInjectorError: No provider for RoleGuardService! ... ....

下面是role-guard.sevice.ts文件内容：

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';
//import { AuthGuard } from './auth.guard';
import { CommonService } from './../services/common.service';
import { AuthGuard, DisableAuthGuard} from './auth.guard';

@Injectable()
export class RoleGuardService implements CanActivate {
  private userDetails: any;
  public user_salt: any;
  public roleName: any;

  constructor(
    //public auth: AuthService, 
    public router: Router,
    private commService: CommonService,
    private location: Location,
    ) {

    }

  canActivate(route: ActivatedRouteSnapshot): boolean {
    this.userDetails = this.commService.getSession('user');
    this.user_salt = this.commService.getSession('user_salt');
    const resultStorage = JSON.parse(this.commService.localstorageDecryption(this.userDetails, this.user_salt, 'N'));

    if (this.roleName === resultStorage.type) {
      return true;
    }

    // navigate to not found page
    this.router.navigate(['/404']);
    return false;
  }

}

Answer 1

您需要在app.module.ts

中添加RoleGuardService

示例如下：

import { AuthGuard, DisableAuthGuard} from '../../_guards/auth.guard';
@NgModule({
providers: [ 
...
RoleGuardService
],
imports: [ 
...
]
}
})

Answer 2

在这里，您必须 import 服务和 Location 在您的 app.module.ts 中，并将其添加到 providers 数组中，如下所示。

   import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
   import { RoleGuardService } from '../../_guards/role-guard.service';     
   import { AuthGuard, DisableAuthGuard} from '../../_guards/auth.guard';
    ....
    ....
    exports : [
        // 
      ],
      providers: [AuthGuard, RoleGuardService, 
        Location, {provide: LocationStrategy, useClass: PathLocationStrategy}
        DisableAuthGuard, {
        provide: RECAPTCHA_SETTINGS,
        useValue: {
          siteKey: environment.recaptchasiteKey,
        } as RecaptchaSettings,
      }]

希望这对您有所帮助！

Answer 3

最初的错误是由于没有将 RoleGuardService 添加到您的 providers。

@NgModule({
  ...
  providers: [AuthGuard, DisableAuthGuard, RoleGuardService, {
    provide: RECAPTCHA_SETTINGS,
    useValue: {
      siteKey: environment.recaptchasiteKey,
    } as RecaptchaSettings,
  }]
  ...
})

随后的错误与您的 RoleGuardService 中的注射有关。您的 constructor 中有 private location: Location，但 Angular 的位置没有导入语句。

import { Location } from '@angular/common';

Answer 4

根据上述答案，在 供应商 下列出 RoleGuardService，如果这个服务是从另一个模块提供的，并且你想在 AppModule 中使用它，请确保在 AppModule 中也导入该模块。

Angular 6: Uncaught (in promise): Error: StaticInjectorError(AppModule)[RoleGuardService]

Angular 6: Uncaught (in promise): Error: StaticInjectorError(AppModule)[RoleGuardService]

angular

angular-routing

angular-guards