Angular-cli: Subject cannot be invoked without 'new' when testing

Created on 7 Nov 2017  路  12Comments  路  Source: angular/angular-cli

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: https://github.com/angular/angular/issues/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://[email protected]: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"
  }
1 (urgent) broken
Source
picture lukemadera
👍21

Most helpful comment

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.

picture aldo-roman on 8 Nov 2017
👍3 ❤2

All 12 comments

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.

aldo-roman picture aldo-roman on 8 Nov 2017
👍3 ❤2

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 picture chadbr on 13 Nov 2017

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

chadbr picture chadbr on 14 Nov 2017

Somewhat related... https://github.com/angular/angular-cli/issues/6333

chadbr picture chadbr on 14 Nov 2017

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...

fredguile picture fredguile on 14 Nov 2017

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

aldo-roman picture aldo-roman on 15 Nov 2017

I can confirm this issue

FrancescoBorzi picture FrancescoBorzi on 17 Nov 2017

Any solution?

criollapp picture criollapp on 18 Nov 2017

Waiting on Devo鈥檚 merge I hope 馃榾馃挭

chadbr picture chadbr on 18 Nov 2017

still getting many:

TypeError: Class constructor BehaviorSubject cannot be invoked without 'new'

my environment:

Angular CLI: 1.5.4
Node: 8.9.1
OS: linux x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.4
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.4
@schematics/angular: 0.1.7
typescript: 2.4.2
webpack: 3.8.1

as mentioned above, this issue affects only when targeting es6, the same source code works perfectly fine with es5.

FrancescoBorzi picture FrancescoBorzi on 23 Nov 2017
👍2

This bug is still valid. I get it every time I set es6 as target in tsconfig.json AND I use --prod build.

Angular CLI: 6.1.4
Node: 8.10.0
OS: linux x64
Angular: 6.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.7.4
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.7.4
@angular-devkit/schematics 0.7.4
@angular/cli 6.1.4
@ngtools/webpack 6.0.8
@schematics/angular 0.7.4
@schematics/update 0.7.4
rxjs 6.2.2
typescript 2.9.2
webpack 4.8.3

FrancescoBorzi picture FrancescoBorzi on 20 Aug 2018
👍2

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 8 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hartjo picture hartjo  路  3Comments
delasteve picture delasteve  路  3Comments
purushottamjha picture purushottamjha  路  3Comments
donaldallen picture donaldallen  路  3Comments
daBishMan picture daBishMan  路  3Comments