时间戳

首页 > 解决方案 > 从版本 2.3.0 到 4.3.0 的 Angular 迁移，mapValuesToArray 符号问题

javascript - 从版本 2.3.0 到 4.3.0 的 Angular 迁移，mapValuesToArray 符号问题

问题描述

使用https://update.angular.io中的迁移指南从 2.3.0 到 4.3.0 的 Angular 迁移 。

已经修复了大部分包版本错误，正在更改包...

我已经更新了我的 packages.json，如下所述，失败给出的日志，没有 AOT：

    ERROR in Error: Error encountered resolving symbol values statically. 
    Function calls are not supported. Consider replacing the function or 
    lambda with a reference to an exported function (position 55:26 in the 
    original .ts file), resolving symbol mapValuesToArray in 
    C:/Users/project/src/app/app.module.ts, resolving 
symbol Artefacts in 
    C:/Users/project/src/app/app.module.ts, resolving symbol AppModule in 
    C:/Users/project/src/app/app.module.ts, resolving symbol AppModule in 
    C:/Users/project/selv2/src/app/app.module.ts

这是我的app.module.ts文件

import {BrowserModule, Title} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {Http, HttpModule} from '@angular/http';
import {TranslateLoader, TranslateModule, TranslateStaticLoader} from 
'ng2-translate';
import {DragulaModule} from 'ng2-dragula/ng2-dragula';
import {ImageCropperComponent} from 'ng2-img-cropper';
import {DynamicFormModule} from './shared/dform/dform.module';
import {SpinnerComponent} from '@app/components';
import {MyDatePickerModule} from 'mydatepicker';
import {UuidModule} from 'ng2-uuid';
import {ResponsiveModule} from 'ng2-responsive';
import {Angulartics2GoogleAnalytics, Angulartics2Module} from 
'angulartics2';
import {Ng2DeviceDetectorModule} from 'ng2-device-detector';
import {StoreModule} from '@ngrx/store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
import {EffectsModule} from '@ngrx/effects';
// Root Application Component
import {AppComponent} from './app.component';
import {PopupModule} from 'ng2-opd-popup';
// Services
import * as services from './services';
import * as guards from './guards';
// Components included using barrel
import * as components from './components';
// Effects
import * as fromEffects from './effects';
// reducers
import {reducer} from './reducers';
import {WindowRefService} from '@app/services';
import {environment} from '../environments/environment';
import {SharedModule} from "@app/shared/shared.module";
import {NotificationsService} from "angular2- 
notifications/src/notifications.service";
import {AppRoutingModule} from "@app/app-routing.module";
import {AboutComponent} from "@app/components/about/about.component";

// Elements loading function
/*const mapValuesToArray = (obj) => Object.keys(obj).map(key => 
 obj[key]);*/

export function mapValuesToArray (obj){
  return [
    Object.keys(obj).map(key => obj[key])
  ];
};

export const apiUrl = (windowRef: WindowRefService) => {
  return environment.api_url || windowRef.nativeWindow['__env']['backend'] 
   + '/api';
};

export const Providers = [
  ...mapValuesToArray(services),
  ...mapValuesToArray(guards),
  { provide: 'api_url', useFactory: apiUrl, deps: [WindowRefService] }
];

export const Artefacts = [
  ...mapValuesToArray(components),
  ImageCropperComponent
];

export const Features = [];

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

@NgModule({
  declarations: [
  AppComponent,
  Artefacts,
  Features,
  SpinnerComponent,
  AboutComponent
],
exports:[RouterModule],
imports: [
   SharedModule,
   Ng2DeviceDetectorModule.forRoot(),
   PopupModule.forRoot(),
   BrowserModule,
   MyDatePickerModule,
   FormsModule,
   ReactiveFormsModule,
   DynamicFormModule,
   HttpModule,
   DragulaModule,
   UuidModule,
   AppRoutingModule,
   TranslateModule.forRoot({
   provide: TranslateLoader,
   useFactory: (createTranslateLoader),
   deps: [Http]
 }),
StoreModule.provideStore(reducer),
StoreDevtoolsModule.instrumentOnlyWithExtension(),
// Initializing effects
EffectsModule.run(fromEffects.AuthEffects),
EffectsModule.run(fromEffects.CircuitEffects),
ResponsiveModule,
Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ]),
],
providers: [
   Title,
   Providers,
   NotificationsService
],
bootstrap: [AppComponent]
})
export class AppModule { }

这是我的Packages.json文件：

{
  "name": "migrationProject",
  "version": "2.0",
  "license": "MIT",
  "@angular/cli": {},
  "scripts": {
      "start": "node node_modules/@angular/cli/bin/ng s --env=source",
      "start:local": "node node_modules/@angular/cli/bin/ng s -- 
      env=local",
      "build": "node node_modules/@angular/cli/bin/ng build --dev -- 
      env=source",
      "build:prod": "node node_modules/@angular/cli/bin/ng build --prod -- 
      env=prod",
      "deploy": "./gradlew deploy",
      "deploy:win": "gradlew.bat deploy",
      "lint": "tslint \"src/**/*.ts\"",
      "test": "node node_modules/@angular/cli/bin/ng test",
      "pree2e": "webdriver-manager update",
      "e2e": "protractor",
      "i18n": "./node_modules/.bin/ng-xi18n"
  },
  "private": true,
  "dependencies": {
  "@angular/animations": "4.3.0 ",
  "@angular/common": "4.3.0 ",
  "@angular/compiler": "4.3.0 ",
  "@angular/core": "4.3.0 ",
  "@angular/forms": "4.3.0 ",
  "@angular/http": "4.3.0 ",
  "@angular/platform-browser": "4.3.0 ",
  "@angular/platform-browser-dynamic": "4.3.0 ",
  "@angular/router": "4.3.0 ",
  "@ngrx/core": "^1.2.0",
  "@ngrx/effects": "^2.0.0",
  "@ngrx/store": "^2.2.1",
  "@swimlane/ngx-charts": "4.4.0",
  "@types/file-saver": "0.0.1",
  "@types/jszip": "0.0.33",
  "@types/lodash": "4.14.30",
  "@types/node-uuid": "0.0.28",
  "angular-2-daterangepicker": "^1.1.32",
  "angular2-bootstrap-switch": "^0.2.3",
  "angular2-jwt": "^0.1.28",
  "angular2-notifications": "0.4.53",
  "angular2-signaturepad": "^2.8.0",
  "angular2-tag-input": "^1.2.3",
  "angulartics2": "<= 1.6.4",
  "chart.js": "^2.7.2",
  "classlist.js": "^1.1.20150312",
  "core-js": "^2.4.1",
  "d3": "^4.6.0",
  "dragula": "^3.7.2",
  "file-saver": "^1.3.3",
  "font-awesome": "^4.7.0",
  "lie": "^3.3.0",
  "lodash": "^4.14.17",
  "moment": "2.18.1",
  "mydatepicker": "^2.0.20",
  "ng-qrcode": "^1.1.2",
  "ng2-ckeditor": "^1.2.2",
  "ng2-device-detector": "^1.0.0",
  "ng2-dragula": "^1.2.1",
  "ng2-file-upload": "^1.2.1",
  "ng2-img-cropper": "^0.8.0",
  "ng2-opd-popup": "^1.1.21",
  "ng2-pdf-viewer": "^3.0.8",
  "ng2-responsive": "^0.8.4",
  "ng2-translate": "^4.2.0",
  "ng2-uuid": "0.0.3",
  "ngx-bootstrap": "^2.0.0",
  "ngx-drag-drop": "^1.1.0",
  "ngx-infinite-scroll": "^0.8.4",
  "ngx-popover": "0.0.16",
  "node-uuid": "^1.4.8",
  "pdf.js": "^0.1.0",
  "pdfjs-dist": "^1.9.489",
  "rxjs": "^5.4.2",
  "ts-helpers": "^1.1.1",
  "zone.js": "^0.8.14"
},
"devDependencies": {
  "@angular/cli": "^1.4.3",
  "@angular/compiler-cli": "^4.3.0 ",
  "@angular/platform-server": "4.3.0 ",
  "@ngrx/store-devtools": "^3.2.2",
  "@types/chai": "^3.4.34",
  "@types/jasmine": "2.5.38",
  "@types/node": "^6.0.51",
  "angular2-template-loader": "^0.6.2",
  "awesome-typescript-loader": "^3.5.0",
  "base64-js": "^1.2.1",
  "bootstrap": "^3.3.7",
  "bootstrap-sass": "^3.3.7",
  "codelyzer": "^2.0.0-beta.4",
  "coffeescript": "^2.4.1",
  "css-loader": "^0.26.4",
  "extract-text-webpack-plugin": "^2.0.0-beta.5",
  "file-loader": "^3.0.1",
  "html-webpack-plugin": "^3.2.0",
  "ieee754": "^1.1.8",
  "jasmine-core": "^2.5.2",
  "jasmine-spec-reporter": "^3.2.0",
  "jszip": "3.1.3",
  "karma": "^1.3.0",
  "karma-chrome-launcher": "^2.0.0",
  "karma-cli": "^1.0.1",
  "karma-coverage": "^1.1.1",
  "karma-jasmine": "^1.0.2",
  "karma-mocha-reporter": "^2.2.2",
  "karma-phantomjs-launcher": "^1.0.2",
  "karma-remap-istanbul": "^0.6.0",
  "karma-sourcemap-loader": "^0.3.7",
  "karma-webpack": "1.8.0",
  "ngrx-store-freeze": "^0.1.6",
  "ngx-bootstrap": "^1.6.5",
  "node-sass": "^4.11.0",
  "protractor": "^5.1.1",
  "raw-loader": "^2.0.0",
  "reflect-metadata": "^0.1.9",
  "sass-loader": "^4.1.1",
  "sockjs-client": "^1.1.4",
  "style-loader": "^0.13.2",
  "ts-helpers": "^1.1.2",
  "ts-node": "^1.7.0",
  "tslint": "^4.3.1",
  "tslint-loader": "^3.3.0",
  "typescript": "~2.3.3",
  "url-loader": "^1.1.2",
  "webpack": "^4.3.0",
  "webpack-dev-server": "^2.11.5"
 }
}

如何解决此错误...

标签： javascriptangularmigration

解决方案

Import services
// Does not use the mapValuesToArray function
export function mapValuesToArray (obj){
   return [
      Object.keys(obj).map(key => obj[key])
   ];
}

//  Replace the following expression : 
export const Artefacts = [
   ...mapValuesToArray(components),
   ImageCropperComponent
];

// With the following expression :
export const Artefacts = [
   ...components,
   ImageCropperComponent
];

// for that you should change the following import :
import * as components from './components';

// to this expression :
import {components} from './components';

// you need also to exports the components in your index.ts as follows :
import {SpinnerComponent} from "./spinner/spinner.component";
import {AboutComponent} from "./about/about.component";

export const components = [AboutComponent, SpinnerComponent];

// does the same for the following imports :
import * as services from './services';
import * as guards from './guards';

// In the other hand
unistall webpack library, because it is offer by @angular/cli

推荐阅读