I am trying to upgrade an Angular 2 Visual Studio project to Angular 5. I had reasonably good luck with it compiling until I tried to upgrade angular/router to a compatible version. The original "3.0.0-rc.1" compiles but uses OpaqueTokens, so it doesn't work.
When I try to add the version for angular/router specified in the new package.json below all sorts of normal typsescript types such as Boolean then don't get recognized. It looks like the compiler is completely messed up. I don't know if I even need the @angular/upgrade for this version of the code.
I've tried to do some of the things mentioned on How to update / upgrade from Angular 4 to Angular 5 but none of the accepted solutions works for me.
The original angular 2 package.json was:
"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"
}
Current config is:
"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"
}
someone asked about the build configuration in the package.json
this is the scripts in the package.json file. There is something wrong here even if this worked for angular 2, because when you do npm run build it complains about not knowing about "clean"
"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"
}
The tsconfig.json file is below. I had to add the line "lib": ["dom"] to the file to prevent a compile error.
{
"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"
]
}
