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.

5 comments:

  1. The blog is absolutely truly incredible. Lots of large information and inspiration, both of which we all need.
    Mobile App Development Company India

    ReplyDelete
  2. Nice blog.. Thanks for sharing informative blog.. I just want to say that all the information you have given here is awesome...great and nice blog thanks sharing.
    Hire .Net Developers India
    .Net Development Company India
    hire asp.net developers
    .net development services

    ReplyDelete


  3. I am really impressed along with your writing skills and also with the format on your blog.

    Hire Angular Developers

    ReplyDelete
  4. Thanks. The "lib": [ "dom", "es2015" ] solved my tsc errors like "default_iterable_differ.d.ts(28,32): error TS2304: Cannot find name 'Iterable'".

    (Angular 4.3.0 and typescript 2.5.2)

    ReplyDelete