I have been working on implementing an Auth guard with Angular 9, but I encountered an ERROR in the browser console:
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(SampleModule)[AuthGuard -> Store -> Store -> Store -> Store]: NullInjectorError: No provider for Store! NullInjectorError: R3InjectorError(SampleModule)[AuthGuard -> Store -> Store -> Store -> Store]: NullInjectorError: No provider for Store! at NullInjector.get (core.js:1050) at R3Injector.get (core.js:16521) at R3Injector.get (core.js:16521) at R3Injector.get (core.js:16521) at NgModuleRef$1.get (core.js:35539) at R3Injector.get (core.js:16521) at injectInjectorOnly (core.js:905) at Module.ɵɵinject (core.js:915) at Object.AuthGuard_Factory [as factory] (auth.guard.ts:17) at R3Injector.hydrate (core.js:16747) at resolvePromise (zone-evergreen.js:793) at resolvePromise (zone-evergreen.js:752) at zone-evergreen.js:854 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at Object.onInvokeTask (core.js:40744) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:570)
Below is the code for the Guard:
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) {
}
This is my Sample module
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
{
}
And this is my app module
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
{
}