Typescript global library, dom, is not transpiled, causing errors


#1

There’s a weird transpilation bug which results in the Typescript DOM library not being loaded under some specific conditions, resulting in a TouchList is not defined error.

To reproduce:

  1. Start with a blank Ionic starter app.

  2. Save the following file to src/components/drag.ts

import {Directive, HostListener} from '@angular/core';

@Directive({ selector: '[caDraggable]' })
export class Draggable {
  constructor() {
  }

  @HostListener('touchstart', ['$event.changedTouches']) onTouchStart(touches: TouchList) {
    console.log(touches.item);
  }
}
  1. Add this to your src/app/app.module.ts:

import { Draggable } from '../components/drag';

  declarations: [
    MyApp,
    HomePage,
    Draggable,
  ],
  1. Run ionic serve, and view the application in Firefox.

  2. You will get the error “TouchList is not defined.”

TouchList is an interface defined in the DOM Typescript library, which is referenced in the tsconfig. So, it should always be available, but sometimes, it is not. I’ve noticed that the problem happens only when TouchList is referenced inside a decorated function, and upon doing an automatic rebuild, the problem goes away.

What happens during the build process is that on the first build, the Draggable class is decorated with the line:

__metadata("design:paramtypes", [TouchList]),

However, on subsequent builds, this line is not included in www/build/main.js.

Why is the build process behaving like this, and is there a workaround?

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.10
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 7.6.0
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:58.0) Gecko/20100101 Firefox/58.0

TypeScript version: typescript@2.6.2


#2

TypeScript version perhaps also relevant.