nativescript - NativeScript 在 app.module 中导入 NGXS 模块在日志控制台中引发错误
问题描述
我是 NativeScript 的新手,我想使用状态管理NGXS
并实施到我的应用程序中。我已经安装NGXS
了NPM
:@ngxs/store
@ngxs/logger-plugin
和@ngxs/devtools-plugin
.
所以我将这些NGXS
模块添加到我的 app.module 中。
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { NgxsModule } from '@ngxs/store';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { PetState } from './_ngxs/pet/pet.state';
@NgModule({
bootstrap: [
AppComponent
],
imports: [
AppRoutingModule,
NativeScriptModule,
NativeScriptUISideDrawerModule,
NgxsModule.forRoot([
//if i uncomment PetState, in console log show me error, Failed to find module: "./pet.actions"
// PetState
]),
//if i uncomment `NgxsLoggerPluginModule.forRoot()`, in console log show me error, Failed to find module: "@ngxs/logger-plugin
// NgxsLoggerPluginModule.forRoot(),
//if i uncomment `NgxsReduxDevtoolsPluginModule.forRoot()`, in console log show me error, Failed to find module: "@ngxs/devstool-plugin
// NgxsReduxDevtoolsPluginModule.forRoot()
],
declarations: [
AppComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
添加 ngxs 模块后,我遇到了 2 个问题。
NgxsModule.forRoot
如果我取消注释它会在PetState
控制台日志中抛出错误,找不到模块:“./pet.actions”。请参考如果我取消注释
NgxsLoggerPluginModule.forRoot()
/NgxsReduxDevtoolsPluginModule.forRoot()
我将在控制台日志中收到错误并说failed to find module @ngxs/logger-plugin
/@ngxs/devstool-plugin
下面是pet.state.ts
代码
import { State, Action, Selector, StateContext } from '@ngxs/store';
import { Pet } from './pet.model';
import { AddPet, RemovePet } from './pet.actions';
export class PetStateModel {
pets: Pet[];
}
@State<PetStateModel>({
name: 'Pet',
defaults: {
pets: []
}
})
export class PetState {
@Selector()
static getPet(state: PetStateModel) {
return state.pets;
}
@Action(AddPet)
addPet({getState, patchState}: StateContext<PetStateModel>, { payload }: AddPet) {
const state = getState();
patchState({
pets: [...state.pets, payload]
})
}
@Action(RemovePet)
removePet({getState, patchState}: StateContext<PetStateModel>, { payload }: RemovePet) {
const state = getState();
patchState({
pets: state.pets.filter(a => a.name !== payload )
})
}
}
我真的需要有人可以帮助我解决问题,谢谢,
这里更新
的是我的package.json
{
"nativescript": {
"id": "org.nativescript.pledgeCareSample",
"tns-android": {
"version": "5.2.1"
},
"tns-ios": {
"version": "5.2.0"
}
},
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"scripts": {
"lint": "tslint \"src/**/*.ts\""
},
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/http": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@ngxs/storage-plugin": "^3.4.3",
"@ngxs/store": "^3.4.3",
"nativescript-angular": "~7.2.1",
"nativescript-theme-core": "~1.0.4",
"nativescript-ui-sidedrawer": "~5.1.0",
"nativescript-unit-test-runner": "^0.6.0",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.3.0",
"tns-core-modules": "~5.2.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "~7.2.0",
"@nativescript/schematics": "~0.5.0",
"@ngtools/webpack": "~7.2.0",
"@ngxs/devtools-plugin": "^3.4.3",
"@ngxs/logger-plugin": "^3.4.3",
"@types/jasmine": "^3.3.12",
"codelyzer": "~4.5.0",
"karma": "4.0.1",
"karma-jasmine": "2.0.1",
"karma-nativescript-launcher": "0.4.0",
"nativescript-dev-sass": "~1.6.0",
"nativescript-dev-typescript": "~0.8.0",
"nativescript-dev-webpack": "~0.20.0",
"tslint": "~5.11.0"
},
"gitHead": "f548ec926e75201ab1b7c4a3a7ceefe7a4db15af",
"readme": "NativeScript Application"
}
解决方案
好的,我找到了解决方案。几个小时后,我在这里和我的解决方案中找到了这个解决方案
只需要删除node_modules
,hook
然后platform
文件夹npm i
并platform
为 ios 和 android 添加。
还有一件事我不知道为什么,我卸载@ngxs/logger-plugin
并@ngxs/devtools-plugin
重新安装回依赖项而不是开发依赖项。
无论如何,现在它对我有用。
推荐阅读
- bash - 无法读取 bash 管道中的所有文件行
- python - Pad_Sequences 获取 max_len 的多个参数(Keras)
- vue.js - Vue:绑定 img src 不起作用,但硬编码它起作用
- r - 闪亮的 UI 和服务器循环
- html - ng-repeat 数据闪烁然后消失
- android - android.support.design.button.MaterialButton 抛出 InflateException
- python - 如何在 Python 中将值数组插入符号函数
- pointers - Frama-c 无法证明 `char*` 以外类型的缓冲区指针的有效性
- android - 在 React Native For Android 中添加文档扫描仪
- javascript - 从 firebase 获取多个数据并将其存储在表中