使用 https://update.angular.io 中的迁移指南，从2.3.0到4.3.0进行角迁移。
已经修复了大多数软件包的版本错误，正在更改软件包...
我已经更新了我的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/zerdan/Desktop/docap_clone/selv2/src/app/app.module.ts, resolving
symbol Artefacts in
C:/Users/zerdan/Desktop/docap_clone/selv2/src/app/app.module.ts, resolving symbol AppModule in
C:/Users/zerdan/Desktop/docap_clone/selv2/src/app/app.module.ts, resolving symbol AppModule in
C:/Users/zerdan/Desktop/docap_clone/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"
}
}
如何解决此错误...
答案 0 :(得分：0)
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