Question

我正在尝试将Angular 2 Visual Studio项目升级到Angular 5.我在编译时运气相当不错，直到我尝试将角度/路由器升级到兼容版本。原始的“3.0.0-rc.1”编译但使用OpaqueTokens，所以它不起作用。

当我尝试在新的package.json中指定的角度/路由器版本下面添加所有类型的普通typsescript类型（如布尔值）时，不会被识别。看起来编译器完全搞砸了。我不知道这个版本的代码是否需要@ angular / upgrade。

我试图做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文件中的脚本。这里有一些错误，即使这适用于角度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替换它们。

错误从角度2升级到角度5

1 个答案: