Monday, May 1, 2017

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

.../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. (.../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. (/Users/markus/Documents/Ritzlgrmft/ionic-logging-service/node_modules/tslint/bin/tslint:3:1)
  at Module._compile (module.js:409:26)
This happens due to Iterable, which is a es2015 feature. I solved it by adding the following to my tsconfig.json:

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

But now I got a lot of errors like

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

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

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:

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.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.