Subject cannot be invoked without 'new' when testing

[lukemadera]

Bug Report or Feature Request (mark with an x)

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

Versions.

Angular v5.0.0
"@angular/cli": "1.5.0",
"@angular/compiler-cli": "5.0.0",

NOTE: this WORKS with all dependencies the same but @angular/cli at 1.4.0-beta.2

Repro steps.

ng test

The log given by the failure.

209) order - should set undefined cell to ascending
     PLTableHeaderCellComponent
     TypeError: Class constructor Subject cannot be invoked without 'new'
    at new EventEmitter Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/@angular/core/esm5/core.js:4188:1)
    at new NgZone Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/@angular/core/esm5/core.js:4335:1)
    at TestBed.webpackJsonp.../../../core/esm5/testing.js.TestBed._initIfNeeded Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/@angular/core/esm5/testing.js:957:1)
    at TestBed.webpackJsonp.../../../core/esm5/testing.js.TestBed.createComponent Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/@angular/core/esm5/testing.js:1074:1)
    at Function.webpackJsonp.../../../core/esm5/testing.js.TestBed.createComponent Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/@angular/core/esm5/testing.js:808:1)
    at __WEBPACK_IMPORTED_MODULE_1__angular_core_testing__.a.configureTestingModule.compileComponents.then Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/src/lib/pl-table-framework/pl-table-header-cell.component.spec.ts:24:31)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:392:1)
    at AsyncTestZoneSpec.webpackJsonp.../../../../zone.js/dist/async-test.js.AsyncTestZoneSpec.onInvoke Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/async-test.js:49:1)
    at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/proxy.js:76:1)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:391:1)
Error: Uncaught (in promise): TypeError: Class constructor Subject cannot be invoked without 'new'
    at resolvePromise Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:824:1)
    at http://localhost:9876/_karma_webpack_/webpack:/Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:876:1
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:425:1)
    at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvokeTask Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/proxy.js:103:1)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:424:1)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:192:1)
    at drainMicroTaskQueue Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:602:1)
    at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:503:1)
    at ZoneTask.invoke Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:488:1)
    at timer Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:2040:1)
     TypeError: Cannot set property 'orderable' of undefined
    at UserContext.it Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/src/lib/pl-table-framework/pl-table-header-cell.component.spec.ts:102:23)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:392:1)
    at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/proxy.js:79:1)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:391:1)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/zone.js:142:1)
    at UserContext.<anonymous> Users/lukemadera/Documents/code/presencelearning/pl-components-ng2/node_modules/zone.js/dist/jasmine-patch.js:104:1)

TOTAL: 212 FAILED, 214 SUCCESS

Desired functionality.

Tests (on components) to pass as they did before.

Mention any other details that might be useful.

Upgraded to Angular 5.0.0. Everything works fine except tests now fail.

See: angular/angular#20215

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "components"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "app/common/less/main.less"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "local": "environments/environment.local.ts",
        "test": "environments/environment.test.ts",
        "stag": "environments/environment.stag.ts",
        "live": "environments/environment.live.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {},
    "serve": {
        "port": 4200
    }
  }
}

package.json

"dependencies": {
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "@ngrx/core": "1.2.0",
    "@ngrx/store": "4.1.0",
    "@types/lodash.camelcase": "4.3.3",
    "@types/lodash.omit": "4.5.3",
    "@types/lodash.pick": "4.4.3",
    "@types/lodash.throttle": "4.1.3",
    "@types/zen-observable": "0.5.3",
    "apollo-angular": "1.0.0-beta.2",
    "apollo-angular-link-http": "1.0.0-beta.5",
    "apollo-cache-inmemory": "1.0.0",
    "apollo-client": "2.0.1",
    "apollo-link-http": "1.1.0",
    "core-js": "2.5.1",
    "graphql": "0.11.7",
    "graphql-tag": "2.5.0",
    "lodash.camelcase": "4.3.0",
    "lodash.omit": "4.5.0",
    "lodash.pick": "4.4.0",
    "lodash.throttle": "4.1.1",
    "lunr": "2.1.4",
    "moment": "2.19.1",
    "moment-timezone": "0.5.14",
    "raven-js": "3.19.1",
    "rxjs": "5.5.2",
    "socket.io-client": "2.0.4",
    "tslint": "5.8.0",
    "unfetch": "3.0.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "5.0.0",
    "@types/jasmine": "2.6.2",
    "@types/lodash.template": "4.4.3",
    "@types/lunr": "2.1.3",
    "@types/node": "8.0.47",
    "codelyzer": "4.0.1",
    "cypress": "1.0.3",
    "dotenv": "4.0.0",
    "gulp": "3.9.1",
    "gulp-svgo": "1.2.5",
    "gulp-template": "4.0.0",
    "intl": "1.2.5",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage": "1.1.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-spec-reporter": "0.0.31",
    "less": "2.7.3",
    "lite-server": "2.3.0",
    "lodash.template": "4.4.0",
    "md5": "2.2.1",
    "pl-cypress-shared": "git+ssh://git@github.com:presencelearning/pl-cypress-shared.git#master",
    "prettier": "1.7.4",
    "rollup": "0.50.0",
    "rollup-plugin-commonjs": "8.2.6",
    "rollup-plugin-node-resolve": "3.0.0",
    "rollup-plugin-uglify": "2.0.1",
    "through2": "2.0.3",
    "ts-node": "3.3.0",
    "typescript": "2.6.1",
    "yargs": "10.0.3"
  }

[aldo-roman]

I see same issue. We had to downgrade the app to es5 (at least in order to test the app).

Temporary workaround:

// tsconfig.app.json
{
  ...
  "target": "es2015" -> "es5"
  ...
}

It seems the test dependencies cannot handle ES2015 just yet.

[chadbr]

This is too bad :(
It's keeping us from upgrading for now.

We're targeting es6 because it greatly simplifies debugging and we don't need to support older browsers.

Our tests target es5 to support PhantomJS. Is this is an issue with tests using tsconfig.app.json instead of tsconfig.spec.json for tests? I don't think changing tsconfig.app.json should matter to the tests?

Thanks - Chad

[chadbr]

if it helps -- I also tried 1.6.0-beta.0 with no luck...

[chadbr]

Somewhat related... #6333

[fredguile]

Normally I could fix this issue by moving the lib property of tsconfig.json from:

 "lib": ["es5", "es2015", "dom"]

to:

"lib": ["es2017", "dom"]

If it helps...

[aldo-roman]

Hi everyone, I got another workaround.

Basically, it consists on setting 2 apps, one targeting ES2015 and the other targeting ES5. They both share the exact same source code.

You can then run the tests on the ES5 app only.

The approach is discussed on:
https://medium.com/@aldoroman/no-more-es5-only-angular-apps-on-prod-b56422de324e

Cheers!

Note: of course, if you only target ES2015, you can bypass the ES5 building step showed on the post