No provider for Store! Error at injectionError - nativescript

Question

app.component.html
<page-router-outlet></page-router-outlet>
app.component.ts
import 'rxjs/add/operator/let';
import { Component, ViewEncapsulation } from '#angular/core';
import { EchoesState, getSidebarCollapsed$ } from './core/store';
import { Store } from '#ngrx/store';
#Component({
selector: "ns-app",
templateUrl: "app.component.html",
})
export class AppComponent {
constructor(private store: Store<EchoesState>){}
}
app.module.ts
import 'nativescript-localstorage';
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";
import { ItemService } from "./item/item.service";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule
],
declarations: [
AppComponent,
ItemsComponent,
ItemDetailComponent
],
providers: [
ItemService
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
app.routing.ts
import { NgModule } from "#angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "#angular/router";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
const routes: Routes = [
{ path: "", redirectTo: "/items", pathMatch: "full" },
{ path: "items", component: ItemsComponent },
{ path: "item/:id", component: ItemDetailComponent },
];
#NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
main.aot.ts
import { platformNativeScript } from "nativescript-angular/platform-static";
import { AppModuleNgFactory } from "./app.module.ngfactory";
platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);
main.ts
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app.module";
platformNativeScriptDynamic().bootstrapModule(AppModule);
package.json
{
"android": {
"v8Flags": "--expose_gc"
},
"main": "main.js",
"name": "tns-template-hello-world-ng",
"version": "3.0.0"
}
store/index.js:
import { Observable } from 'rxjs/Observable';
import { NgModule } from '#angular/core';
import { StoreModule, combineReducers } from '#ngrx/store';
import { compose } from '#ngrx/core/compose';
import { StoreDevtoolsModule } from '#ngrx/store-devtools';
import { localStorageSync } from 'ngrx-store-localstorage';
import 'rxjs/add/operator/let';
import { environment } from '../../environments/environment';
import { getSidebarExpanded } from './app-layout';
import { getAppReducersRegistry, EchoesState, EchoesReducers, EchoesActions } from './reducers';
export { EchoesState } from './reducers';
const actions = EchoesActions; // storeAssets.actions;
const reducers = EchoesReducers; // storeAssets.reducers;
const composeStore = reducers;
const optionalImports = [];
const productionReducer = compose(localStorageSync(Object.keys(reducers), true), combineReducers)(reducers);
export function appReducer(state: any, action: any) {
return productionReducer(state, action);
}
if (!environment.production) { optionalImports.push(StoreDevtoolsModule.instrumentOnlyWithExtension());
}
#NgModule({
imports: [
StoreModule.provideStore(appReducer),
...optionalImports
],
declarations: [],
exports: [],
providers: [ ...actions ]
})
export class CoreStoreModule {
constructor() {
console.log('CoreStoreModule initiated:', reducers);
}
};
function getAppLayoutState(state$: Observable<EchoesState>) {
return state$.select(state => state.appLayout);
}
export function getSidebarCollapsed$(state$: Observable<EchoesState>) {
return state$.select((state) => state.appLayout.sidebarExpanded);
}
store/reducers.ts
import { AppLayout, AppLayoutActions, appLayout, appLayoutRegister } from './app-layout';
import { NowChannellistActions, NowChannellistInterface, nowChannellist, nowChannellistRegister } from './now-channellist';
import { NowPlaylistActions, NowPlaylistInterface, nowPlaylist, nowPlaylistRegister } from './now-playlist';
// reducers
import { PlayerActions, YoutubePlayerState, player, playerRegister } from './youtube-player';
import { UploadsList, VideosListActions, search, searchRegister } from './uploads-list';
import { UserProfileActions, UserProfileData, user, userRegister } from './user-profile';
import { Observable } from 'rxjs/Observable';
export interface EchoesState {
player: YoutubePlayerState;
nowPlaylist: NowPlaylistInterface;
nowChannellist: NowChannellistInterface;
user: UserProfileData;
search: UploadsList;
appLayout: AppLayout;
};
export let EchoesReducers = {
player,
nowPlaylist,
nowChannellist,
user,
search,
appLayout,
};
export let EchoesActions = [
PlayerActions,
NowPlaylistActions,
NowChannellistActions,
UserProfileActions,
VideosListActions,
AppLayoutActions
];
export function getAppReducersRegistry() {
return [
playerRegister,
nowPlaylistRegister,
nowChannellistRegister,
userRegister,
searchRegister,
appLayoutRegister
];
};
export function getPlayer$ (state$: Observable<EchoesState>): Observable<YoutubePlayerState> {
return state$.select(state => state.player);
};
export function getPlayerSearch$ (state$: Observable<EchoesState>): Observable<UploadsList> {
return state$.select(state => state.search);
};
export function getPlayerSearchResults$ (state$: Observable<EchoesState>): Observable<any[]> {
return state$.select(state => state.search.results);
};
export function getAppLayout$ ($state: Observable<EchoesState>): Observable<AppLayout> {
return $state.select(state => state.appLayout);
};
export function getNowPlaylist$ ($state: Observable<EchoesState>): Observable<NowPlaylistInterface> {
return $state.select(state => state.nowPlaylist);
};
export function getNowChannellist$ ($state: Observable<EchoesState>): Observable<NowChannellistInterface> {
return $state.select(state => state.nowChannellist);
};
The error I am getting is:
No provider for Store!
Error
at injectionError (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:1238:86)
[angular]
at noProviderError (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:1276:12)
[angular]
at ReflectiveInjector_._throwOrNull (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:2777:19)
[angular]
at ReflectiveInjector_._getByKeyDefault (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:2816:25)
[angular]
at ReflectiveInjector_._getByKey (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:2748:25)
[angular]
at ReflectiveInjector_.get (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:2617:21)
[angular]
at AppModuleInjector.NgModuleInjector.get (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:3585:52)
[angular]
at resolveDep (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:11046:45)
[angular]
at createClass (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:10899:35)
[angular]
at createDirectiveInstance (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:10730:37)
[angular]
at createViewNodes (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:12093:49)
[angular]
at createRootView (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:11998:5)
[angular]
at callWithDebugContext (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:13213:42)
[angular]
at Object.debugCreateRootView [as createRootView] (file:///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/#angular/core/bundles/core.umd.js:12673:12)
[angular]

Answer 1

I know this question seems dead, but for info, the provideStore function doesn't exist anymore, you should do
StoreModule.forRoot(/*your reducers here*/)

Answer 2

You need to add the provider to the NgModule, i.e module.ts under providers,
providers: [
Store
]

Answer 3

You should import Store in your main module (app.module.ts):
imports: [
StoreModule.provideStore({ /* your reducers here... */ }),
...