Running `ng test` fails with Uncaught ReferenceError: [TYPE_NAME] is not defined

[IngvarKofoed]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

$ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 6.9.1
os: win32 x64
@angular/common: 4.0.0
@angular/compiler: 4.0.0
@angular/core: 4.0.0
@angular/forms: 4.0.0
@angular/http: 4.0.0
@angular/platform-browser: 4.0.0
@angular/platform-browser-dynamic: 4.0.0
@angular/router: 4.0.0
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.0

Windows 10

Repro steps.

Step 1
Run the following command

ng new myapp

Step 2
Add following file MyType.ts in the folder where the generate app.conponent.ts is located.

export class MyType {
    constructor(public id: string){}
}

Step 3
Modify app.conponent.ts so it looks like this:

import { Component, Input } from '@angular/core';
import { MyType } from "app/MyType";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  private selectedId: string;
  @Input() set setSelectedId(myType: MyType | undefined) {
    if (product !== undefined) {
      this.selectedId = myType.id;
    }
    else {
      this.selectedId = myType;
    }
  }
}

Step 4
Run the following command

ng test

The log given by the failure.

Result:

$ ng test
25 03 2017 07:37:40.092:WARN [karma]: No captured browser, open http://localhost:9876/
25 03 2017 07:37:40.107:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
25 03 2017 07:37:40.108:INFO [launcher]: Launching browser Chrome with unlimited concurrency
25 03 2017 07:37:40.185:INFO [launcher]: Starting browser Chrome
25 03 2017 07:37:41.275:INFO [Chrome 57.0.2987 (Windows 10 0.0.0)]: Connected on socket 9t52BW0h_NVdN1zYAAAA with id 31811334
Chrome 57.0.2987 (Windows 10 0.0.0) ERROR
  Uncaught ReferenceError: MyType_1 is not defined
  at webpack:///src/app/app.component.ts:13:43 <- src/test.ts:52770

Chrome 57.0.2987 (Windows 10 0.0.0) ERROR
  Uncaught ReferenceError: MyType_1 is not defined
  at webpack:///src/app/app.component.ts:13:43 <- src/test.ts:52770

Desired functionality.

I would like to to have the test being run :)

Mention any other details that might be useful.

App is working fine, so it seems to be only when running tests. I know that it worked in version 2.x of the cli and Im pretty sure it is related to the typescript version, where it worked with TS 2.0.x and not with TS 2.2.x.

Alto, it works if @Input is not used and app.component.ts looks this:

import { Component } from '@angular/core';
import { MyType } from "app/MyType";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  private selectedId: string;
  set setSelectedId(myType: MyType | undefined) {
    if (product !== undefined) {
      this.selectedId = myType.id;
    }
    else {
      this.selectedId = myType;
    }
  }
}

[zakhenry]

Same issue here, it seems to be related to using typescript union types in method signatures, either @Input or constructor in my case

[zakhenry]

Further investigation leads me to the direction of metadata reflection combined with interface unions, however I'm still stumped on a solution

[zakhenry]

Another update. So I was able to find a temporary fix - in tsconfig.spec.json, change module to es2015 and target to es6. Mine looks like:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "es2015",
    "target": "es6",
    "baseUrl": "",
    "types": [
      "jasmine",
      "node",
      "faker"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

This does not fix the issue however, as switching to targeting es6 is obviously risky when runtime uses es5, and it also breaks the coverage reporter completely.

[mark-holmes]

Same issue here. My testing matches yours in that it is caused by a combination of @ Input() with union types. The latest version of typescript that works for me is 2.1.4

[IngvarKofoed]

My repro steps can repro this issue without using discriminated union types.

[zakhenry]

@IngvarKofoed the one in your description of the original issue? That has method signature set setSelectedId(myType: MyType | undefined). Unless you mean another repro?

[IngvarKofoed]

@zakhenry Oh yea, totally did not see that, sorry :)

[orazyto]

Getting the same issue here....
Updating tsconfig.spec.json as suggested by @zakhenry (module="es2015") does resolve the issue for running ng test.

However, this completely breaks code coverage collection (ng test --cc).
I've created a separate issue to track this bug: #6142