从Angular 2.x.x升级到4

时间:2017-03-19 23:47:25

标签: angular ngrx

我已将我的应用程序更新为Angular 4,据我所知,除了动画外,它不应该导致更改。

但是,我之前正在使用的应用程序失败,例外情况为:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at combineReducers (vendor.bundle.js:68589)
    at Object._initialReducerFactory [as a] (vendor.bundle.js:68531)

似乎是由ng-rx商店引起的,我没有更新(或更改了!的实现。)。

我可以打破chrome中的combineReducers行,它首先使用我的完整减速器列表来调用该函数,因为我期望两次,作为compose和combineReducers的一部分(参见下面的代码)。然后,在未定义的Reducer列表上再次随机调用它。

追溯调用堆栈并没有让我走得太远。它来自&#34; AppModuleInjector&#34;,用以下行:

  get _INITIAL_REDUCER_94():any {
    if ((this.__INITIAL_REDUCER_94 == null)) { (this.__INITIAL_REDUCER_94 = import8._initialReducerFactory(this.__INITIAL_REDUCER_93)); }
    return this.__INITIAL_REDUCER_94;
  }

这个.__ INITIAL_REDUCER_93未定义。我不知道这些东西是什么,或者它们起源于何处。我的代码中只出现了两次combineReducers:

const reducers = {
  profile: profileReducer,
  ..etc (this is what appears fine as a list of reducers the first function call)
};

const productionReducer: ActionReducer<AppState> = combineReducers(reducers);
const developmentReducer: ActionReducer<AppState> = compose(storeFreeze, combineReducers)(reducers);

我对于出了什么问题感到有些失落,以及Angular 4的变化可能导致了什么。我没有发现任何谷歌搜索。任何人都知道在哪里可以看得更远或问题是什么?

修改

有趣的是,违规的减速器在createInternal():import1.AppModule中被调用:

this._REDUX_DEVTOOLS_EXTENSION_28 = import38._createReduxDevtoolsExtension();

它为空的原因是它导致它在之后发生:

this.__INITIAL_REDUCER_93 = import56.reducer;

Edit2:再看看NPM安装/包。似乎那里有一些不确定的东西。我在一堆角度组件上得到了未满足的依赖:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ng2-pdf-viewer@1.0.2 requires a peer of @angular/core@^2.2.1 but none was installed.
npm WARN @ngrx/store@2.2.1 requires a peer of @angular/core@^2.0.0 but none was installed.
npm WARN angular-calendar@0.7.3 requires a peer of @angular/common@>=2.0.0 <5.0.0 but none was installed.
npm WARN angular-calendar@0.7.3 requires a peer of @angular/core@>=2.0.0 <5.0.0 but none was installed.
npm WARN angular-calendar@0.7.3 requires a peer of @angular/platform-browser@>=2.0.0 <5.0.0 but none was installed.
npm WARN @ngrx/effects@2.0.1 requires a peer of @angular/core@^2.0.0 but none was installed.
npm WARN ng2-file-upload@1.2.0 requires a peer of @angular/common@^2.3.0 but none was installed.
npm WARN ng2-file-upload@1.2.0 requires a peer of @angular/core@^2.3.0 but none was installed.
npm WARN ngrx-store-localstorage@0.1.5 requires a peer of @angular/core@^2.0.0-rc.5 but none was installed.
npm WARN ng2-charts@1.5.0 requires a peer of @angular/common@^2.3.0 but none was installed.
npm WARN ng2-charts@1.5.0 requires a peer of @angular/core@^2.3.0 but none was installed.
npm WARN angular-draggable-droppable@0.5.4 requires a peer of @angular/core@>=2.0.0 <5.0.0 but none was installed.
npm WARN angular-resizable-element@0.7.2 requires a peer of @angular/core@>=2.0.0 <5.0.0 but none was installed.

但我已经在我的packages.json中找到了这些:

 "dependencies": {
    "@angular/common": "4.0.0-rc.5",
    "@angular/compiler": "4.0.0-rc.5",
    "@angular/core": "4.0.0-rc.5",
    "@angular/forms": "4.0.0-rc.5",
    "@angular/http": "4.0.0-rc.5",
    "@angular/platform-browser": "4.0.0-rc.5",
    "@angular/platform-browser-dynamic": "4.0.0-rc.5",
    "@angular/router": "4.0.0-rc.5",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.0",
    "@ngrx/store": "^2.2.1",
    "@ngrx/store-devtools": "^3.2.1",
    "@types/body-parser": "^0.0.32",
    "@types/compression": "^0.0.33",
    "@types/cors": "^0.0.33",
    "@types/express": "^4.0.32",
    "@types/jasmine": "^2.5.43",
    "@types/jsonwebtoken": "^7.1.31",
    "@types/lodash": "^4.14.54",
    "@types/node": "^6.0.48",
    "@types/node-uuid": "^0.0.28",
    "angular-calendar": "^0.7.3",
    "body-parser": "~1.13.2",
    "chart.js": "^2.5.0",
    "codelyzer": "^2.0.1",
    "compression": "^1.6.2",
    "concurrently": "^3.3.0",
    "cookie-parser": "^1.3.5",
    "core-js": "^2.4.1",
    "express": "^4.13.4",
    "express-jwt": "^3.3.0",
    "html-pdf": "^2.1.0",
    "http-proxy": "^1.16.2",
    "immutable": "^3.8.1",
    "jsonwebtoken": "^5.7.0",
    "lodash": "^4.17.4",
    "multer": "^1.3.0",
    "mysql": "^2.13.0",
    "ng2-charts": "^1.5.0",
    "ng2-file-upload": "^1.2.0",
    "ng2-pdf-viewer": "^1.0.2",
    "ngrx-store-freeze": "^0.1.9",
    "ngrx-store-localstorage": "^0.1.5",
    "ngx-mydatepicker": "0.0.6",
    "node-uuid": "^1.4.7",
    "normalizr": "^3.1.0",
    "passport": "^0.3.2",
    "passport-local": "^1.0.0",
    "passport-token": "^0.2.0",
    "path": "^0.12.7",
    "reselect": "^2.5.4",
    "rxjs": "^5.1.1",
    "ts-helpers": "^1.1.1",
    "typed-immutable-record": "0.0.6",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.2",
    "@angular/compiler-cli": ">=4.0.0-beta <5.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.1.0"
  }

我得到&#34;未满足的同伴依赖&#34;在安装所述依赖项时:

C:\ Users \ user \ Documents \ Projects \ project&gt; npm install @ angular / core @ 4.0.0-rc.5 --save angular2-express-starter@1.0.0 C:\ Users \ user \ Documents \ Projects \ project + - UNMET PEER DEPENDENCY @ angular / common @ 4.0.0-rc.5 + - UNMET PEER DEPENDENCY @ angular / core @ 4.0.0-rc.5 ` - UNMET PEER DEPENDENCY @ angular / platform-b​​rowser @ 4.0.0-rc.5

1 个答案:

答案 0 :(得分:2)

我认为现在有一个解决方案正在进行中。

它位于ngrx/store-devtools

对robertohuertasm @ github的赞誉

您可以在推送新版本之前删除devtools以解决此问题。