How to correctly include the ngrx-store-localstorage library?

Question

Angular

I can not correctly connect the ngrx-store-localstorage library. I understand that the question is childish, but I'm just starting to master the framework.
note.model

export class Note {
  constructor(
    public lable?: string,
    public content?: string,
    public id?: number,
    public date?: string,
    public color?: string,
    public archive: boolean = false

  ) {}
}
export interface Notes {
  notes: Note []
}

app.state

import {Note} from '../note.model';

export interface AppState {
  NotePage: {
    notes: Note[]
  }
}

note action

import {Action} from '@ngrx/store';
import {Note} from '../note.model';

export namespace NOTE_ACTION {
  export const ADD_NOTE = 'ADD_NOTE';
  export const DELETE_NOTE = 'DELETE_NOTE';
  export const ARCHIVE_NOTE = 'ARCHIVE_NOTE'
}
export class AddNote implements Action {
  readonly type = NOTE_ACTION.ADD_NOTE;

  constructor(public payload: Note) {}
}
export class DeleteNote implements Action {
  readonly type = NOTE_ACTION.DELETE_NOTE;

  constructor(public payload: Note) {}
}
export class ArchiveNote implements Action {
  readonly type = NOTE_ACTION.ARCHIVE_NOTE;

  constructor(public payload: Note) {}
}
export type NoteAction = AddNote | DeleteNote | ArchiveNote

note.reducer

import {Note} from '../note.model';
import {NOTE_ACTION, NoteAction} from './notes.action';

const initialState = {
  notes: [
    new Note('test','test',1),
  ]
};

export function notesReducer(state = initialState, action: NoteAction) {
  switch (action.type) {
    case NOTE_ACTION.ADD_NOTE:
      return {
        ...state,
        notes: [...state.notes, action.payload]
      };
    case NOTE_ACTION.DELETE_NOTE:
      return {
        ...state,
        notes: [...state.notes.filter(c => c.id !== action.payload.id)]
      };
    case NOTE_ACTION.ARCHIVE_NOTE:
      const idx = state.notes.findIndex(c => c.id === action.payload.id);
      state.notes[idx].archive = true;
      return {
        ...state,
        notes:[...state.notes]
      };
    default:
      return state
  }
}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DeskComponent } from './desk/desk.component';
import { NoteComponent } from './note/note.component';
import { SearchComponent } from './search/search.component';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {MatCardModule} from '@angular/material/card';
import {MatMenuModule} from '@angular/material/menu';
import {MatButtonModule} from '@angular/material/button';
import { EntryFormComponent } from './entry-form/entry-form.component';
import {MatIconModule} from '@angular/material/icon';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatInputModule} from '@angular/material/input';
import {MatExpansionModule} from '@angular/material/expansion';
import { EditFormComponent } from './edit-form/edit-form.component';
import {MatDialogModule} from '@angular/material/dialog';
import {FormsModule} from '@angular/forms';
import {StoreModule, ActionReducerMap, ActionReducer, MetaReducer} from '@ngrx/store'
import {notesReducer} from './ngrx/notes.reducer';
import {localStorageSync} from 'ngrx-store-localstorage';
import {AppState} from './ngrx/app.state';
import {Note} from './note.model';


const reducers: ActionReducerMap<AppState> = {NotePage: notesReducer};

export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return localStorageSync({keys: ['notes']}), rehydrate: true}) (reducer);
}
const metaReducers: Array<MetaReducer<any, any>> = [localStorageSyncReducer];

@NgModule({
  declarations: [
    AppComponent,
    DeskComponent,
    NoteComponent,
    SearchComponent,
    EntryFormComponent,
    EditFormComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DragDropModule,
    MatCardModule,
    MatMenuModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    MatInputModule,
    MatExpansionModule,
    MatDialogModule,
    FormsModule,
    StoreModule.forRoot(
      reducers,
      {metaReducers}
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

When assembling, the application does not generate errors, the application logic for adding / deleting objects of the note class does not work. Error in browser console: ERROR TypeError: Cannot read property 'notes' of undefined.