karma-typescript: Invalid syntax in bundle: 'import' and 'export' may only appear at the top level

After upgrading some dependent modules, I got:

[Error: Invalid syntax in bundle: 'import' and 'export' may only appear at the top level (79532:186) in /var/folders/zk/6bvt6fls7g97ry69c8jykn_h0000gn/T/karma-typescript-bundle-62976QkhHVRO4DC9R.js]
Error: Invalid syntax in bundle: 'import' and 'export' may only appear at the top level (79532:186) in /var/folders/zk/6bvt6fls7g97ry69c8jykn_h0000gn/T/karma-typescript-bundle-62976QkhHVRO4DC9R.js
    at writeBundleFile (.../node_modules/karma-typescript/lib/bundler.js:171:23)
    at flushQueue (.../node_modules/karma-typescript/lib/bundler.js:99:9)
    at bundleQueuedModules (.../node_modules/karma-typescript/lib/bundler.js:94:9)
    at invokeFunc (.../node_modules/lodash.debounce/index.js:160:19)
    at trailingEdge (.../node_modules/lodash.debounce/index.js:207:14)
    at timerExpired [as _onTimeout] (.../node_modules/lodash.debounce/index.js:195:14)
    at Timer.listOnTimeout (timers.js:92:15)

The solution was to:

• npm install karma-typescript@beta (I am using now 3.0.0-beta.2)
• npm install karma-typescript-es6-transform@latest (I am using 1.0.0-beta.6)
• add to karmaTypescriptConfig:
  

  bundlerOptions: {
    transforms: [
      require("karma-typescript-es6-transform")()
    ]
  }
  

For details see How to use es6 library.

Upgrading Angular dependencies to the versions used by Ionic 2.2

I provide a npm package, which contains a service thought for use in Ionic applications.
This service doesn't have any dependencies to Ionic itself, only to some Angular packages.
Since Ionic 2.2 uses newer versions of Angular (2.4.8 instead of 2.2.1), I updated the
Angular dependencies to the new versions. And then, ngc didn't work anymore. I got a strange error:

Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AnimationDriver.NOOP in .../ionic-configuration-service/node_modules/@angular/platform-browser/src/dom/animation_driver.d.ts, resolving symbol BrowserTestingModule in .../ionic-configuration-service/node_modules/@angular/platform-browser/testing/browser.d.ts, resolving symbol BrowserTestingModule in .../ionic-configuration-service/node_modules/@angular/platform-browser/testing/browser.d.ts

The error message was not very helpful, also Google did not provide a lot of information.
I found only some posts from end of last year.

The solution was - finally - quite easy. I had to add a specific tsconfig.aot.json, which is used by ngc.
The differences to the original tsconfig.json are:

{
  "compilerOptions": {
    "module": "es2015"
  },
  "files": [
    "src/index.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot"
  }
}

• module es2015 is needed for tree shaking
• files defines the entry point
• genDir specifies where ngc stores its intermediate files

The last bit was to tell ngc to use the new configuration:

ngc -p tsconfig.aot.json

For a detailed explanation, just check the Angular Cookbook.