我已经使用Nrwl Nx和NGRX创建了angular9应用程序。我有用于应用程序和功能的设置存储。该功能已创建为库。但是，在初始化用于根存储的app.reducer时会触发，而不会触发功能归约器。下面是代码。
在排除故障后，我发现以下内容：
1. @ ngrx / store / update-reducers尚未触发。
2.在控制台中观察到以下警告。
@ngrx/store: The feature name "auth" does not exist in the state, therefore createFeatureSelector cannot access it. Be sure it is imported in a loaded module using StoreModule.forRoot('auth', ...) or StoreModule.forFeature('auth', ...). If the default state is intended to be undefined, as is the case with router state, this development-only warning message can be ignored.
(anonymous) @ store.js:1110
(anonymous) @ store.js:1015
defaultStateFn @ store.js:1011
(anonymous) @ store.js:1070
memoized @ store.js:976
(anonymous) @ store.js:1015
defaultStateFn @ store.js:1011
(anonymous) @ store.js:1070
memoized @ store.js:976
(anonymous) @ store.js:854
_next @ map.js:29
next @ Subscriber.js:49
_next @ map.js:35
next @ Subscriber.js:49
_subscribe @ ReplaySubject.js:57
_trySubscribe @ Observable.js:42
_trySubscribe @ Subject.js:81
subscribe @ Observable.js:28
_subscribe @ Observable.js:76
subscribe @ Observable.js:27
call @ map.js:16
subscribe @ Observable.js:23
_subscribe @ Observable.js:76
subscribe @ Observable.js:27
call @ map.js:16
subscribe @ Observable.js:23
call @ distinctUntilChanged.js:11
subscribe @ Observable.js:23
createSubscription @ common.js:5793
_subscribe @ common.js:5915
transform @ common.js:5892
ɵɵpipeBind1 @ core.js:36749
LoginComponent_Template @ login.component.html:1
executeTemplate @ core.js:12010
refreshView @ core.js:11857
refreshComponent @ core.js:13295
refreshChildComponents @ core.js:11586
refreshView @ core.js:11909
refreshDynamicEmbeddedViews @ core.js:13220
refreshView @ core.js:11880
refreshComponent @ core.js:13295
refreshChildComponents @ core.js:11586
refreshView @ core.js:11909
renderComponentOrTemplate @ core.js:11983
tickRootContext @ core.js:13457
detectChangesInRootView @ core.js:13491
detectChanges @ core.js:15182
tick @ core.js:42908
(anonymous) @ core.js:42758
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41465
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41240
next @ core.js:42755
schedulerFn @ core.js:36985
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36947
checkStable @ core.js:41379
onHasTask @ core.js:41486
hasTask @ zone-evergreen.js:419
_updateTaskCount @ zone-evergreen.js:440
_updateTaskCount @ zone-evergreen.js:263
runTask @ zone-evergreen.js:184
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:42457
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:13
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
Show 39 more frames
请帮助我解决该问题。
应用程序模块：
import { NgModule } from '@angular/core';
import {SharedModule } from '@family-health/shared'
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { LayoutModule } from './layout/layout.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { StoreModule } from '@ngrx/store';
import { appReducer, metaReducers, rootInitialState } from './+state/app.reducer';
import { StoreRouterConnectingModule, NavigationActionTiming } from '@ngrx/router-store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { EffectsModule } from '@ngrx/effects';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
LayoutModule,
SharedModule,
StoreModule.forRoot(
appReducer,
{ metaReducers, initialState: rootInitialState }
),
EffectsModule.forRoot([]),
StoreDevtoolsModule.instrument(),
StoreRouterConnectingModule.forRoot({
navigationActionTiming: NavigationActionTiming.PostActivation
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
app.reducer
import { AppBaseActions } from './app.actions';
import { MetaReducer, ActionReducer } from '@ngrx/store';
import { storeFreeze } from 'ngrx-store-freeze';
import * as fromRouter from '@ngrx/router-store';
import { AuthActionTypes } from '@family-health/auth';
export interface AppBaseData {
IsSideNavVisible: boolean;
}
export const appBaseInitialState: AppBaseData = {
IsSideNavVisible: true
}
export const rootInitialState = {
router: {
state: {
url: '/',
params: {},
queryParams: {}
},
navigationId: 0
},
};
export const appReducer = {
router: fromRouter.routerReducer, // ActionReducerMap<AppRouterState>
base: appBaseReducer
};
export function appBaseReducer(
state = appBaseInitialState,
action: AppBaseActions
): AppBaseData {
return state;
}
export function resetStateOnLogout(reducer: ActionReducer<any>): ActionReducer<any> {
return function (state, action) {
if (action.type === AuthActionTypes.Logout) {
return reducer(rootInitialState, action);
}
return reducer(state, action);
};
}
export const metaReducers: MetaReducer<any>[] = [resetStateOnLogout, storeFreeze];
身份验证模块：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Route, RouterModule } from '@angular/router';
import { LoginComponent } from './containers/login/login.component';
import { Routes as AuthRoutes } from './auth.routes';
import { LoginFormComponent } from './components/login-form/login-form.component';
import { ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '@family-health/material';
import { SharedModule } from '@family-health/shared';
import { StoreModule } from '@ngrx/store';
import { authReducer, initialState as authInitialState } from './+state/auth.reducer';
import { EffectsModule } from '@ngrx/effects';
import { AuthEffects } from './+state/auth.effects';
export const sharedAuthRoutes: Route[] = [
{ path: AuthRoutes.Login.path, component: LoginComponent },
{ path: '', redirectTo: AuthRoutes.Login.path, pathMatch: 'full' }
];
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
RouterModule,
MaterialModule,
SharedModule,
StoreModule.forFeature('auth', authReducer, {
initialState: authInitialState
}),
EffectsModule.forFeature([AuthEffects])
],
declarations: [LoginComponent, LoginFormComponent]
})
export class AuthModule {}
auth.reducer：
import { AuthActions } from './auth.actions';
export interface AuthData {
loading: boolean;
}
/**
* Interface to the part of the Store containing AuthState
* and other information related to AuthData.
*/
export interface AuthState {
readonly auth: AuthData;
}
export const initialState: AuthData = {
loading: false
}
export function authReducer(
state = initialState,
action: AuthActions
): AuthData {
switch (action.type) {
default: {
return state;
}
}
}
package.json：
"dependencies": {
"@angular/animations": "^9.1.0",
"@angular/cdk": "^9.2.0",
"@angular/common": "^9.1.0",
"@angular/compiler": "^9.1.0",
"@angular/core": "^9.1.0",
"@angular/forms": "^9.1.0",
"@angular/material": "^9.2.0",
"@angular/platform-browser": "^9.1.0",
"@angular/platform-browser-dynamic": "^9.1.0",
"@angular/router": "^9.1.0",
"@ngrx/effects": "^9.1.0",
"@ngrx/router-store": "8.0.0",
"@ngrx/store": "8.0.0",
"@ngrx/store-devtools": "8.0.0",
"@nrwl/angular": "9.2.2",
"bootstrap": "^4.4.1",
"core-js": "^2.5.4",
"rxjs": "^6.5.5",
"zone.js": "^0.10.2"
},