Kein Anbieter für Store! Fehler bei injectionError

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); 
}; 

Der Fehler Ich erhalte ist:

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

Sie müssen die Anbieter für die NgModule, dh module.ts unter Anbietern hinzuzufügen,

providers: [ 
    Store 
] 

Answer 2

Sie sollten Shop in der Haupt importieren Modul (app.module.ts):

imports: [ 
    StoreModule.provideStore({ /* your reducers here... */ }), 
    ... 

Answer 3

Ich weiß, diese Frage scheint tot, aber für Informationen, die ProvideStore Spaß ction existiert nicht mehr, sollten Sie

StoreModule.forRoot(/*your reducers here*/)