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

I had this problem not with the test but the main code itself when I upgraded from Angular 4.3.0 to 5.2.9 and Angular Material from 2.0.0-beta-2 to 5.2.4. The problem was an @Injected service inside a parent component.

export abstract class ParentComponent {
    constructor(@Inject(WhateverService) protected service: WhateverService,
            protected dialog: MatDialog, protected error: Error) { }
}

---

export class ChildComponent extends ParentComponent {
    constructor(service: WhateverService, dialog: MatDialog, error: Error) {
        super(service, dialog);
    }
}

That was giving the error:

ERROR Error: Uncaught (in promise): ReferenceError: material_1 is not defined
ReferenceError: material_1 is not defined

As wrong as it might look, it was working with the older versions.

Well, investigating the transpiled js, I saw that the material_1 was for the dialog and I spent hours in that parameter. Until I saw that if I put the MatDialog parameter first, the problem was transferred to the third parameter. That’s when I realized that the problem was with the service. So the solution for me was to put the @Inject annotation into the ChildCompoment (which makes more sense).

export abstract class ParentComponent {
    constructor(protected service: WhateverService,
            protected dialog: MatDialog, protected error: Error) { }
}

---

export class ChildComponent extends ParentComponent {
    constructor(@Inject(WhateverService) service: WhateverService,
            dialog: MatDialog, error: Error) {
        super(service, dialog);
    }
}

And now it’s working fine. Well, it might be a little unrelated to the issues you are reporting, but I hope it helps you to find the solution to your environment.

I’m sorry, but we can’t reproduce the problem following the instructions you provided. Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue. Short, explicit instructions make it much more likely we’ll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

I had the same issue initially with ng test as was provided in the description. It was fixed by changing module and target to es2015 and es6 appropriately . But after upgrading to ng 5.x even this fix stopped working + JIT compilation stopped working with the same error as well…

The another workaround for me was assigning the type which causes this error to any variable before class definition. With this fix everything started working even with initial module=commonjs ad target=es5. Here is an example:

import {MyIssueService} from 'path_to_service';
[other imports]

const hack = MyIssueService;
export class ConsumerClass {
   constructor(private service: MyIssueService) {
   }
   ...
}

@zakhenry @filipesilva I was just able to fix mine but doing something a bit crazy. I realized that components where I have an object (ex: MyObj) as an @Input parameter type but where I don’t use the type in the code in the module are the only modules giving me issues. So I added a usage of the type in the module and the issues goes away.

So if you have ‘MyObj’ as the type for the @Input with null, try adding a protected method to the component that simply returns a new instance of that type. Doesn’t have to be called, just has to use the type. Once I did that it worked again.

Example:

class MyComp {
   @Input() myObj: MyObj | null = null;

   protected _notCalled(): any {
      return new MyObj();
   }
}

Crazy hack I know, but it worked for me.

@zakhenry Oh yea, totally did not see that, sorry 😃

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.

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