Я пытаюсь разработать Auth Guard с помощью Angular 9, но когда я пытаюсь внедрить его в компонент в консоли браузера, выдается сообщение об ошибке:
Ошибка: Uncaught (в Обещание): NullInjectorError: R3InjectorError (SampleModule) [AuthGuard -> Магазин -> Магазин -> Магазин -> Магазин]: NullInjectorError: Нет поставщика для Магазина! NullInjectorError: R3InjectorError (SampleModule) [AuthGuard -> Магазин -> Магазин -> Магазин -> Магазин]: NullInjectorError: Нет провайдера для магазина! на NullInjector.get (core. js: 1050) на R3Injector.get (core. js: 16521) на R3Injector.get (core. js: 16521) на R3Injector.get (core. js: 16521) в NgModuleRef $ 1.get (core. js: 35539) в R3Injector.get (core. js: 16521) в injectInjectorOnly (core. js: 905) в Module.ɵɵinject (core. js : 915) в Object.AuthGuard_Factory [как фабрика] (auth.guard.ts: 17) в R3Injector.hydrate (ядро. js: 16747) в resolPromise (zone-evergreen. js: 793) в resolPromise (зона -evergreen. js: 752) в зоне вечнозеленых. js: 854 в ZoneDelegate.invokeTask (зона-вечнозеленых. js: 400) в Object.onInvokeTask (ядро. js: 40744) в ZoneDelegate. invokeTask (zone-evergreen. js: 399) в Zone.runTask (zone-evergreen. js: 168) в канале MicroTaskQueue (zone-evergreen. js: 570)
Вот Страж:
import {
CanActivate,
CanActivateChild,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from '@angular/router'
import { Store } from '@ngrx/store'
import { AppState } from '../auth.store/states/app.state'
import { AuthService } from '../auth.services/auth.services'
import { AuthActions } from '../auth.store/actions/auth.actions'
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanActivateChild {
constructor(private store$: Store<AppState>,
private authService: AuthService) {
}
Это мой пример модуля
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { SampleComponent } from './sample.component';
import { AuthGuard } from 'app/auth.app/auth.guards/auth.guard';
const routes = [
{
path : 'sample',
component: SampleComponent,
canActivate : [AuthGuard]
}
];
@NgModule({
declarations: [
SampleComponent
],
imports : [
RouterModule.forChild(routes),
TranslateModule,
],
providers:[
AuthGuard
],
exports : [
SampleComponent
]
})
export class SampleModule
{
}
А это мой модуль приложения
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import 'hammerjs';
import { AppComponent } from 'app/app.component';
import { LayoutModule } from 'app/layout/layout.module';
const appRoutes: Routes = [
{
path : '',
loadChildren: () => import('./auth.app/auth.module').then(m => m.AuthModule)
},
{
path : '',
loadChildren: () => import('./main/sample/sample.module').then(m => m.SampleModule)
}
];
@NgModule({
declarations: [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
RouterModule.forRoot(appRoutes),
TranslateModule.forRoot(),
// Material moment date module
MatMomentDateModule,
// Material
MatButtonModule,
MatIconModule,
// App modules
LayoutModule,
// SampleModule,
],
bootstrap : [
AppComponent
]
})
export class AppModule
{
}