Angular 19 + NgRx：_StoreRootModule缺失与CSP违规问题解决

1. 解决 NullInjectorError: No provider for _StoreRootModule! 错误 #

在Angular 19的独立组件模式下，不能通过创建模块导入StoreModule.forRoot来配置NgRx，必须使用NgRx提供的provideStore函数在ApplicationConfig中配置根Store，这是独立模式的标准用法。

正确配置步骤： #

1. 确认安装了与Angular 19匹配的NgRx依赖（建议使用NgRx 19版本）：

npm install @ngrx/store@19

2. 在app.config.ts中直接通过provideStore配置根Store，替代模块导入的方式：

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideStore } from '@ngrx/store';
// 导入你的认证状态reducer
import { authReducer } from './state/auth.reducer';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter([
      { 
        path: 'login', 
        loadComponent: () => import('./login/login.component').then(c => c.LoginComponent) 
      }
    ]),
    // 配置根Store，传入你的reducer对象
    provideStore({ auth: authReducer })
  ]
};

3. 如果你还使用了NgRx Effects等其他特性，同样要使用对应的provideEffects函数，而非EffectsModule.forRoot。

常见误区： #

• 不要创建独立模块来包裹StoreModule.forRoot再导入到appConfig，这会导致NgRx无法正确初始化根Store模块。
• 确保所有NgRx相关的配置都通过provideXxx函数添加到appConfig的providers数组中。

2. CSP违规问题分析与解决 #

CSP违规（内联脚本被阻止、favicon.ico加载失败）与NgRx配置无关，主要是Angular开发服务器的默认行为或资源路径问题导致：

解决内联脚本被阻止： #

Angular在开发模式下会注入一些内联脚本用于热更新、调试等功能，默认CSP规则会阻止这些脚本。你可以通过以下方式解决：
在src/index.html的<head>标签中添加CSP meta标签，开发模式下允许必要的内联脚本：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">

注意：生产环境建议移除'unsafe-inline'和'unsafe-eval'，改用非内联脚本和哈希/非ce值来提升安全性。

解决favicon.ico加载被阻止： #

• 确保项目根目录（src/下）存在favicon.ico文件，若没有可以生成一个或暂时移除index.html中的<link rel="icon" ...>标签。
• 检查index.html中favicon的路径是否正确，比如：

<link rel="icon" type="image/x-icon" href="favicon.ico">

内容的提问来源于stack exchange，提问作者Jaime Simeon Palomar