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"
}

存储/ 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);
}

存储/ 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);
};

我得到的错误是：

没有商店提供商！

错误       at injectionError（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:1238:86）   [角]       at noProviderError（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:1276:12）   [角]       在ReflectiveInjector _._ throwOrNull（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:2777:19）   [角]       在ReflectiveInjector _._ getByKeyDefault（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:2816:25）   [角]       在ReflectiveInjector _._ getByKey（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js：2748：25）   [角]       在ReflectiveInjector_.get（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:2617:21）   [角]       在AppModuleInjector.NgModuleInjector.get（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:3585:52）   [角]       at resolveDep（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:11046:45）   [角]       at createClass（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:108099:35）   [角]       at createDirectiveInstance（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:10730:37）   [角]       at createViewNodes（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:12093:49）   [角]       at createRootView（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js：11998：5）   [角]       at callWithDebugContext（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:13213:42）   [角]       at Object.debugCreateRootView [as createRootView]（file：///data/data/org.nativescript.MyApptarchec/files/app/tns_modules/@angular/core/bundles/core.umd.js:12673:12）   [角]

Answer 1

您需要将提供程序添加到NgModule，即providers下的module.ts，

providers: [
  Store 
]

Answer 2

我知道这个问题似乎已经死了，但是对于信息，不再存在provideStore函数，你应该这样做

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

Answer 3

您应该在主模块中导入Store（app.module.ts）：

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

商店没有提供商！ injectionError

3 个答案: