Angular NGXS注入Store失败：SignUpComponent报NullInjectorError

项目模块结构：

• AuthenticationModule
  • SignInModule
  • SignUpModule

每个模块对应各自组件，但SignUpComponent注入NGXS的Store时报错，SignInComponent无此问题，两者模块及组件结构高度相似。

错误信息 #

default-src_app_components_authentication-components_authentication-components_module_ts-node-811f82.js:2 ERROR NullInjectorError: R3InjectorError(SignUpModule)[Store -> Store -> Store -> Store -> Store]: 
  NullInjectorError: No provider for Store!
    at NullInjector.get (core.mjs:6359:27)
    at R3Injector.get (core.mjs:6786:33)
    at R3Injector.get (core.mjs:6786:33)
    at R3Injector.get (core.mjs:6786:33)
    at R3Injector.get (core.mjs:6786:33)
    at R3Injector.get (core.mjs:6786:33)
    at ChainedInjector.get (core.mjs:13769:36)
    at lookupTokenUsingModuleInjector (core.mjs:3293:39)
    at getOrCreateInjectable (core.mjs:3338:12)
    at Module.ɵɵdirectiveInject (core.mjs:10871:12)

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(SignUpModule)[Store -> Store -> Store -> Store -> Store]: 
  NullInjectorError: No provider for Store!
NullInjectorError: R3InjectorError(SignUpModule)[Store -> Store -> Store -> Store -> Store]: 
  NullInjectorError: No provider for Store!
    at NullInjector.get (core.mjs:6359:27)
    at R3Injector.get (core.mjs:6786:33)
    at R3Injector.get (core.mjs:6786:33)
    at R3Injector.get (core.mjs:6786:33)
    at R3Injector.get (core.mjs:6786:33)
    at R3Injector.get (core.mjs:6786:33)
    at ChainedInjector.get (core.mjs:13769:36)
    at lookupTokenUsingModuleInjector (core.mjs:3293:39)
    at getOrCreateInjectable (core.mjs:3338:12)
    at Module.ɵɵdirectiveInject (core.mjs:10871:12)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26218:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)

相关代码 #

SignUpModule #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SignUpRoutingModule } from './sign-up-routing.module';
import { SignUpComponent } from './sign-up.component';
import {
    AuthenticationComponentsModule
} from "../../../components/authentication-components/authentication-components.module";
import {ReactiveFormsModule} from "@angular/forms";
import {MatInputModule} from "@angular/material/input";


@NgModule({
  declarations: [
    SignUpComponent
  ],
  imports: [
    CommonModule,
    SignUpRoutingModule,
    AuthenticationComponentsModule,
    MatInputModule,
    ReactiveFormsModule
  ]
})
export class SignUpModule { }

SignInModule #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SignInRoutingModule } from './sign-in-routing.module';
import { SignInComponent } from './sign-in.component';
import {
  AuthenticationComponentsModule
} from "../../../components/authentication-components/authentication-components.module";
import {MatInputModule} from "@angular/material/input";
import {ReactiveFormsModule} from "@angular/forms";


@NgModule({
  declarations: [
    SignInComponent
  ],
  imports: [
    CommonModule,
    SignInRoutingModule,
    AuthenticationComponentsModule,
    MatInputModule,
    ReactiveFormsModule
  ]
})
export class SignInModule { }

AppModule #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {environment} from "../environments/environment";
import { NgxsModule } from '@ngxs/store';
import {SaveUserEmailState} from "./use-cases/states/save-user-email-state.service";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NgxsModule.forRoot([
      SaveUserEmailState
    ], {
      developmentMode: !environment.production
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

SignUpComponent #

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {AuthenticationService} from "../../../services/authentication-service/authentication.service";
import {Routes} from "../../../Routes";
import {first, take, tap} from "rxjs";
import {Router} from "@angular/router";
import {SaveUserEmail} from "../../../use-cases/actions/save-user-sub.actions";
import {Store} from "@ngxs/store";

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.scss']
})
export class SignUpComponent implements OnInit {
  formGroup!: FormGroup;
  error: string | null = null;
  signInRoute = Routes.Authentication.SignIn;

  constructor(
    private fb: FormBuilder,
    private router: Router,
    private authService: AuthenticationService,
    private store: Store
  ) { }

  ngOnInit(): void {
    this.formGroup = this.fb.group({
      emailFC: ["", [Validators.required, Validators.email]],
      passwordFC: ["", [Validators.required]],
      passwordConfirmationFC: ["", [Validators.required]],
      givenNameFC: ["", [Validators.required]],
      familyNameFC: ["", [Validators.required]],
    })
  }

  signUp() {
    if (this.formGroup.valid) {
      const emailValue = this.formGroup.controls['emailFC'].value;
      const passwordValue = this.formGroup.controls['passwordFC'].value;
      const givenNameValue = this.formGroup.controls['givenNameFC'].value;
      const familyNameValue = this.formGroup.controls['familyNameFC'].value;
      this.authService.signUp(emailValue, passwordValue, givenNameValue, familyNameValue).pipe(
        take(1),
        tap(response => {
          const userSub = response.userSub;
          this.store.dispatch(new SaveUserEmail(userSub))
            .pipe(
              first(),
              tap(_ => {
                console.log(response)
                this.router.navigate([Routes.Authentication.SignUpConfirmation])
              })
            ).subscribe();
        })
      ).subscribe();
    }
  }
}

解决方案 #

错误提示明确显示SignUpModule中找不到Store的提供者，虽然根模块AppModule已经导入了NgxsModule.forRoot，但可能因为模块加载方式（比如懒加载）导致注入器无法继承根模块的提供者。可以尝试以下步骤：

1. 在SignUpModule中导入NgxsModule
   修改SignUpModule的imports数组，添加NgxsModule（无需调用forRoot或forFeature），确保模块能正确获取到Store的提供者：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { NgxsModule } from '@ngxs/store'; // 新增导入
   
   import { SignUpRoutingModule } from './sign-up-routing.module';
   import { SignUpComponent } from './sign-up.component';
   import {
       AuthenticationComponentsModule
   } from "../../../components/authentication-components/authentication-components.module";
   import {ReactiveFormsModule} from "@angular/forms";
   import {MatInputModule} from "@angular/material/input";
   
   
   @NgModule({
     declarations: [
       SignUpComponent
     ],
     imports: [
       CommonModule,
       SignUpRoutingModule,
       AuthenticationComponentsModule,
       MatInputModule,
       ReactiveFormsModule,
       NgxsModule // 新增导入
     ]
   })
   export class SignUpModule { }
   

2. 检查模块导入层级
   确认SignUpModule已正确导入到父模块AuthenticationModule中，且AuthenticationModule已通过路由或直接导入的方式加入到应用模块树中。如果AuthenticationModule是懒加载的，确保路由配置正确，没有隔离注入器的设置。

3. 验证Store导入正确性
   确认SignUpComponent中Store的导入路径正确，是从@ngxs/store导入，而非其他自定义模块或文件。

内容的提问来源于stack exchange，提问作者Jean-Paul Abi-Ghosn