No provider for Store! Error at injectionError

问题

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]

回答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*/)

回答2:

You need to add the provider to the NgModule, i.e module.ts under providers,

providers: [
  Store 
]

回答3:

You should import Store in your main module (app.module.ts):

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

来源：https://stackoverflow.com/questions/44105335/no-provider-for-store-error-at-injectionerror