Updating from Angular 2.4.8 to 4.0.0

Recently, I updated my component ionic-logging-service to the Angular version used by Ionic 3.0.0. After installing the new npm packages, I was able to build the component. But… tslint did no longer work. I got

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.../ionic-logging-service/node_modules/tslint/lib/runner.js:92     throw new Error(messages.join("\n"));     ^   Error: Error at .../ionic-logging-service/node_modules/@angular/core/src/change_detection/differs/iterable_differs.d.ts:15:48: Cannot find name 'Iterable'.   at Runner.run (.../ionic-logging-service/node_modules/tslint/lib/runner.js:92:27)   at Object.<anonymous> (.../ionic-logging-service/node_modules/tslint/lib/tslint-cli.js:139:6)   at Module._compile (module.js:409:26)   at Object.Module._extensions..js (module.js:416:10)   at Module.load (module.js:343:32)   at Function.Module._load (module.js:300:12)   at Module.require (module.js:353:17)   at require (internal/module.js:12:17)   at Object.<anonymous> (/Users/markus/Documents/Ritzlgrmft/ionic-logging-service/node_modules/tslint/bin/tslint:3:1)   at Module._compile (module.js:409:26) </anonymous></anonymous>

This happens due to Iterable, which is a es2015 feature. I solved it by adding the following to my tsconfig.json:

?

1 2 3 4 5 6

"compilerOptions": {   "lib": [     "dom",     "es2015"   ], }

But now I got a lot of errors like

?

1	Error: Error at /Users/markus/Documents/Ritzlgrmft/ionic-logging-service/node_modules/@types/es6-shim/index.d.ts:6:14: Duplicate identifier 'PropertyKey’.

This happens, since es6-shim defines the same types as es2015 lib. Therefore I removed the package @types/es6-shim.

Now tslint was fine, again. But the karma tests failed. I got the error

?

1	Error: No provider for "framework:es6-shim"! (Resolving: framework:es6-shim)

This one was easy, since I uninstalled the package, I had to remove it from the frameworks. But now I got errors like

?

1 2 3

ERROR [compiler.karma-typescript]: node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(23,15): error TS2304: Cannot find name 'Map'. ERROR [compiler.karma-typescript]: node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(27,16): error TS2304: Cannot find name 'Map'. ERROR [compiler.karma-typescript]: node_modules/@angular/core/src/change_detection/differs/iterable_differs.d.ts(15,48): error TS2304: Cannot find name 'Iterable'.

Again the problem are the es2015 features. Therefore I had to add the lib to the compilerOptions in karma.conf.js. However, this was not enough, since currently PhantomJS does not support the es2015 features. Therefore I had to add a polyfill to my files:

?

1 2 3 4 5 6 7

files: [   { pattern:       "src/**/*.+(ts|html)" },       "node_modules/reflect-metadata/Reflect.js",       "node_modules/babel-polyfill/dist/polyfill.js"   }  ],

The used babel-polyfill was already there as a dependency of another package.

And finally, everything was working as before.