从角度2升级到角度5时出错

Question

我正在尝试将一个Angular 2 Visual Studio项目升级到Angular 5。在我尝试将angular/router升级到兼容版本之前，我在编译它方面有相当好的运气。原来的"3.0.0-rc.1“是编译的，但是使用了OpaqueTokens，所以它不能工作。

当我尝试在新的package.json中为angular/router指定的版本添加到所有类型的普通类型下面时，比如Boolean，那么就不能识别了。看起来编译器完全搞砸了。我甚至不知道这个版本的代码是否需要@angular/升级。

我试过做How to update / upgrade from Angular 4 to Angular 5上提到的一些事情，但所有公认的解决方案对我都不起作用。

最初的angular 2 package.json是：

"dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/upgrade": "2.3.0-rc.0",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "es6-shim": "^0.35.0",
    "font-awesome": "^4.7.0",
    "karma-coverage": "^1.1.1",
    "reflect-metadata": "^0.1.8",
    "remap-istanbul": "^0.8.4",
    "rxjs": "5.0.0-rc.4",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.2"
},
"devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.63",
    "babel-core": "^6.23.1",
    "browserify": "^14.1.0",
    "canonical-path": "0.0.2",
    "compress": "^0.99.0",
    "concurrently": "^3.1.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-sourcemaps": "^2.4.1",
    "gulp-typescript": "^3.1.5",
    "gulp-uglify": "^2.0.1",
    "http-server": "^0.9.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "mangle": "^1.1.3",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "systemjs-builder": "^0.16.3",
    "tslint": "^3.15.1",
    "typescript": "^2.0.10",
    "typings": "^0.7.12",
    "uglifyjs": "^2.4.10"
}

当前配置为：

"dependencies": {
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "5.2.10",
    "bootstrap": "^4.1.0",
    "core-js": "^2.4.1",
    "es6-shim": "^0.35.0",
    "font-awesome": "^4.7.0",
    "karma-coverage": "^1.1.1",
    "reflect-metadata": "^0.1.8",
    "remap-istanbul": "^0.11.0",
    "rxjs": "^5.5.2",
    "systemjs": "0.21.3",
    "zone.js": "^0.8.4"
},
"devDependencies": {
    "@types/jasmine": "2.8.6",
    "@types/node": "^9.6.6",
    "babel-core": "^6.23.1",
    "browserify": "^16.2.0",
    "canonical-path": "0.0.2",
    "compress": "^0.99.0",
    "concurrently": "^3.1.0",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-sourcemaps": "^2.4.1",
    "gulp-typescript": "^4.0.2",
    "gulp-uglify": "^3.0.0",
    "http-server": "^0.11.1",
    "jasmine-core": "~3.1.0",
    "karma": "^2.0.2",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^1.0.0",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "mangle": "^1.1.3",
    "protractor": "~5.3.1",
    "rimraf": "^2.5.4",
    "systemjs-builder": "^0.16.3",
    "tslib": "1.9.0",
    "tslint": "^5.9.1",
    "typescript": "^2.5.0",
    "typings": "^2.1.1",
    "uglifyjs": "^2.4.10"
}

有人询问package.json中的构建配置

这是package.json文件中的脚本。即使这在angular 2上有效，这里也有一些问题，因为当你运行npm run build时，它会抱怨不知道“干净”。

"scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install",
    "build": "npm run clean && tsc",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "posttest": "node_modules/.bin/remap-istanbul -i coverage/coverage-final.json -o coverage -t html",
    "coverage": "http-server -c-1 -o -p 9875 ./coverage"
}

tsconfig.json文件如下所示。我必须在文件中添加行"lib"："dom“以防止编译错误。

{
     "compilerOptions": {
     "target": "es5",
     "lib":  ["dom"], 
     "module": "system",
     "moduleResolution": "node",
     "sourceMap": false, // make this false for minification
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false,
     "noStrictGenericChecks": true,
     "outFile": "./app/app.min.js" // uncomment this line for minification
  },
  "compileOnSave": true,
  "exclude": [
      "node_modules",
      "typings/main",
      "typings/main.d.ts",
      //comment out these two lines for jasmine
      "./app/**/*.spec.ts",
      "./app/*.spec.ts"
   ]
}

Answer 1

更好的升级方式是使用npm install，就像我在这里所做的那样：

Typings seems utterly messed up after converting project from angular 2 to angular 5

我最终找到了这个问题的答案。事实证明，我不需要es6-shim，删除不推荐使用的类型并用特定的@types替换它们是可行的。