Angular 19 with NgRx: NullInjectorError: No provider for _StoreRootModule and CSP violations

I am building a login app using Angular 19 with NgRx for state management. I want to store the authentication state using NgRx. My app is set up with standalone components and uses ApplicationConfig for configuration.

I expect the app to work without any errors when I run ng serve and access the /login route. The page should show the default Component message "LoginComponent works!", but when I go to the specified route, I encounter the following error:

NullInjectorError: NullInjectorError: No provider for _StoreRootModule!


Additionally, my browser console logs this:

Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “default-src 'none'”

Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at http://localhost:4200/favicon.ico because it violates the following directive: “default-src 'none'”


What I've tried

1. Creating a standalone module for the state management setup:

@NgModule({
imports: [
StoreModule.forRoot({ authState: authReducer })
],
})
export class AuthStateModule {}


Then importing it into the application configuration:

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(withEventReplay()),
AuthStateModule // Here
],
};

1. Deleting node_modules and reinstalling dependencies using npm install.

Here is the relevant code

1. app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { AuthModule } from './auth/auth.module';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, AuthModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'frontend';
}

1. app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideStore, provideState } from '@ngrx/store';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { routes } from './app.routes';
import { authReducer } from './auth/reducers/auth.reducer';

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(withEventReplay()),
provideStore({}),
provideState({ name: 'authState', reducer: authReducer }),
],
};

1. auth.reducer.ts

import { Routes } from '@angular/router';
import { LoginComponent } from './Components/login/login.component';

export const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: '/login', pathMatch: 'full' }
];

1. index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MiBotiquinFrontend</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>


Questions

How can I resolve the NullInjectorError: No provider for _StoreRootModule! error in my app?

Is the Content Security Policy (CSP) violation error related to my NgRx configuration, or is it a separate issue? How can I resolve it? I haven't set up any CSP configuration in my index.html header.

Continue reading...