NullInjectorError: No provider for Store! AUTH GUARD Angular 9

Question

I'm trying to develop Auth guard with Angular 9 but when I try to implement it into component in browser console gives me ERROR:

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)

Here is 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
{
}

Start by implementing the ngrx store properly: ngrx.io/guide/store — R. Richards

timdeschryver timdeschryver · Accepted Answer · 2020-03-15T13:08:18

You will have to add the store to the imports:

imports: [
 StoreModule.forRoot(...)
]

NullInjectorError: No provider for Store! AUTH GUARD Angular 9

1 Answers