Probleme with ng test + angular material

[Hartaxfr]

What is the current behavior?

I get ping timeout durring "ng test" process when i have "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css" in "angula.json". "ng test" take a long time and restart test again and again

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
  ===>>       "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },

16 01 2019 16:13:25.393:WARN [karma]: No captured browser, open http://localhost:9876/
16 01 2019 16:13:25.397:INFO [karma-server]: Karma v3.1.4 server started at http://0.0.0.0:9876/
16 01 2019 16:13:25.397:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
16 01 2019 16:13:25.403:INFO [launcher]: Starting browser Chrome
16 01 2019 16:13:29.490:WARN [karma]: No captured browser, open http://localhost:9876/
16 01 2019 16:13:29.796:INFO [Chrome 71.0.3578 (Windows 8.1.0.0)]: Connected on socket I5P0dN9-OxH5L8HlAAAA with id 79106811
16 01 2019 16:13:59.792:WARN [Chrome 71.0.3578 (Windows 8.1.0.0)]: Disconnected (0 times)Client disconnected from CONNECTED state (ping timeout)
Chrome 71.0.3578 (Windows 8.1.0.0) ERROR
  DisconnectedClient disconnected from CONNECTED state (ping timeout)

Chrome 71.0.3578 (Windows 8.1.0.0) ERROR
  DisconnectedClient disconnected from CONNECTED state (ping timeout)
16 01 2019 16:14:09.108:INFO [Chrome 71.0.3578 (Windows 8.1.0.0)]: Connected on socket ZCL4b9zrSmv5o8wBAAAB with id 79106811
16 01 2019 16:14:39.514:WARN [Chrome 71.0.3578 (Windows 8.1.0.0)]: Disconnected (0 times)Client disconnected from CONNECTED state (ping timeout)
Chrome 71.0.3578 (Windows 8.1.0.0) ERROR
  DisconnectedClient disconnected from CONNECTED state (ping timeout)

Chrome 71.0.3578 (Windows 8.1.0.0) ERROR
  DisconnectedClient disconnected from CONNECTED state (ping timeout)
16 01 2019 16:14:43.492:INFO [Chrome 71.0.3578 (Windows 8.1.0.0)]: Connected on socket QIDXrml-0m6LD-XDAAAC with id 79106811
Chrome 71.0.3578 (Windows 8.1.0.0): Executed 3 of 3 SUCCESS (0.001 secs / 0.095 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
16 01 2019 16:15:13.494:WARN [Chrome 71.0.3578 (Windows 8.1.0.0)]: Disconnected (0 times)Client disconnected from CChrome 71.0.3578 (Windows 8.1.0.0) ERROR
  DisconnectedClient disconnected from CONNECTED state (ping timeout)
Chrome 71.0.3578 (Windows 8.1.0.0): Executed 3 of 3 SUCCESS (0.001 secs / 0.095 secs)
Chrome 71.0.3578 (Windows 8.1.0.0) ERROR
  DisconnectedClient disconnected from CONNECTED state (ping timeout)
16 01 2019 16:15:21.831:INFO [Chrome 71.0.3578 (Windows 8.1.0.0)]: Connected on socket e4GcYy059OB1BXhYAAAD with id 79106811
16 01 2019 16:15:52.235:WARN [Chrome 71.0.3578 (Windows 8.1.0.0)]: Disconnected (0 times)Client disconnected from CONNECTED state (ping timeout)
Chrome 71.0.3578 (Windows 8.1.0.0) ERROR
  DisconnectedClient disconnected from CONNECTED state (ping timeout)

Chrome 71.0.3578 (Windows 8.1.0.0) ERROR
  DisconnectedClient disconnected from CONNECTED state (ping timeout)
16 01 2019 16:15:55.123:INFO [Chrome 71.0.3578 (Windows 8.1.0.0)]: Connected on socket tTr75wwZ5xW8nPtBAAAE with id 79106811
Chrome 71.0.3578 (Windows 8.1.0.0): Executed 3 of 3 SUCCESS (0 secs / 0.096 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
16 01 2019 16:16:25.126:WARN [Chrome 71.0.3578 (Windows 8.1.0.0)]: Disconnected (0 times)Client disconnected from CChrome 71.0.3578 (Windows 8.1.0.0) ERROR
  DisconnectedClient disconnected from CONNECTED state (ping timeout)
Chrome 71.0.3578 (Windows 8.1.0.0): Executed 3 of 3 SUCCESS (0 secs / 0.096 secs)
Chrome 71.0.3578 (Windows 8.1.0.0) ERROR
  DisconnectedClient disconnected from CONNECTED state (ping timeout)
16 01 2019 16:16:32.217:INFO [Chrome 71.0.3578 (Windows 8.1.0.0)]: Connected on socket O3yulY6aUidXSWldAAAF with id 79106811

What are the steps to reproduce?

i can reproduce this by create an app with angular cli :

ng new app --routing
ng add @angular/material
ng test

When i remove the css include in angular.json :

ng test

16 01 2019 16:12:55.729:WARN [karma]: No captured browser, open http://localhost:9876/
16 01 2019 16:12:55.733:INFO [karma-server]: Karma v3.1.4 server started at http://0.0.0.0:9876/
16 01 2019 16:12:55.734:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
16 01 2019 16:12:55.739:INFO [launcher]: Starting browser Chrome
16 01 2019 16:12:59.513:WARN [karma]: No captured browser, open http://localhost:9876/
16 01 2019 16:12:59.903:INFO [Chrome 71.0.3578 (Windows 8.1.0.0)]: Connected on socket N2lZLZYt4pJH7lMAAAAA with id 67449294
Chrome 71.0.3578 (Windows 8.1.0.0): Executed 3 of 3 SUCCESS (0.103 secs / 0.162 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS

--

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I'm on Windows 8.1 and there is my package.json, i'm not sure to give you the right answer :

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/cdk": "~7.2.1",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.2.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.4",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }

[andrewseguin]

Sorry but I cannot reproduce your issue. I created a new app and was able to test fine with and without material.

[JohnnyWombwell]

Hi

I am getting the exact same issue after upgrading an application from angular 6 to 7 and, as per the simple recreation steps mentioned, find the same problem with a new application after adding angular material. Again, the problem can be worked around by removing the material style from the test node in angular.json

Is there a resolution in the pipeline for this?

Thanks

John

I am running Windows 10 and Chrome 72

06 02 2019 12:13:46.380:INFO [Chrome 72.0.3626 (Windows 10.0.0)]: Connected on socket 5xACUK1jskGAkaXSAAAA with id 17497926
06 02 2019 12:14:16.384:WARN [Chrome 72.0.3626 (Windows 10.0.0)]: Disconnected (0 times), because no message in 30000 ms.
Chrome 72.0.3626 (Windows 10.0.0) ERROR
Disconnected, because no message in 30000 ms.

Chrome 72.0.3626 (Windows 10.0.0) ERROR
Disconnected, because no message in 30000 ms.

06 02 2019 12:14:18.393:WARN [launcher]: Chrome was not killed in 2000 ms, sending SIGKILL.
06 02 2019 12:14:20.394:WARN [launcher]: Chrome was not killed by SIGKILL in 2000 ms, continuing.

If --watch=true, Chrome also periodically displays a 'Page Unresponsive' dialog.

Package versions as follows:

"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/cdk": "~7.3.1",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/material": "^7.3.1",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.0",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}

[blfuentes]

Same problem here>

`C:\Users\BFuentes\source\repos\testangularmaterial>ng new apptest --routing
? Which stylesheet format would you like to use? CSS
CREATE apptest/angular.json (3816 bytes)
CREATE apptest/package.json (1306 bytes)
CREATE apptest/README.md (1024 bytes)
CREATE apptest/tsconfig.json (435 bytes)
CREATE apptest/tslint.json (1621 bytes)
CREATE apptest/.editorconfig (246 bytes)
CREATE apptest/.gitignore (587 bytes)
CREATE apptest/src/favicon.ico (5430 bytes)
CREATE apptest/src/index.html (294 bytes)
CREATE apptest/src/main.ts (372 bytes)
CREATE apptest/src/polyfills.ts (2841 bytes)
CREATE apptest/src/styles.css (80 bytes)
CREATE apptest/src/test.ts (642 bytes)
CREATE apptest/src/browserslist (388 bytes)
CREATE apptest/src/karma.conf.js (989 bytes)
CREATE apptest/src/tsconfig.app.json (166 bytes)
CREATE apptest/src/tsconfig.spec.json (256 bytes)
CREATE apptest/src/tslint.json (314 bytes)
CREATE apptest/src/assets/.gitkeep (0 bytes)
CREATE apptest/src/environments/environment.prod.ts (51 bytes)
CREATE apptest/src/environments/environment.ts (662 bytes)
CREATE apptest/src/app/app-routing.module.ts (245 bytes)
CREATE apptest/src/app/app.module.ts (393 bytes)
CREATE apptest/src/app/app.component.html (1152 bytes)
CREATE apptest/src/app/app.component.spec.ts (1098 bytes)
CREATE apptest/src/app/app.component.ts (211 bytes)
CREATE apptest/src/app/app.component.css (0 bytes)
CREATE apptest/e2e/protractor.conf.js (752 bytes)
CREATE apptest/e2e/tsconfig.e2e.json (213 bytes)
CREATE apptest/e2e/src/app.e2e-spec.ts (619 bytes)
CREATE apptest/e2e/src/app.po.ts (251 bytes)
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.
qual

node-sass@4.11.0 install C:\Users\BFuentes\source\repos\testangularmaterial\apptest\node_modules\node-sass
node scripts/install.js

Cached binary found at C:\Users\BFuentes\AppData\Roaming\npm-cache\node-sass\4.11.0\win32-x64-67_binding.node

node-sass@4.11.0 postinstall C:\Users\BFuentes\source\repos\testangularmaterial\apptest\node_modules\node-sass
node scripts/build.js

Binary found at C:\Users\BFuentes\source\repos\testangularmaterial\apptest\node_modules\node-sass\vendor\win32-x64-67\binding.node
Testing binary
Binary is fine
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1113 packages from 1025 contributors and audited 41386 packages in 87.53s
found 0 vulnerabilities

warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/tsconfig.e2e.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app-routing.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/browserslist.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/tsconfig.spec.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/tslint.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory
Successfully initialized git.

C:\Users\BFuentes\source\repos\testangularmaterial>cd apptest

C:\Users\BFuentes\source\repos\testangularmaterial\apptest>ng add @angular/material
Installing packages for tooling via npm.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@7.3.2 requires a peer of @angular/cdk@7.3.2 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

• @angular/material@7.3.2
  added 1 package and audited 41388 packages in 16.802s
  found 0 vulnerabilities

Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up HammerJS for gesture recognition? Yes
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1396 bytes)
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 3 packages from 4 contributors and audited 41392 packages in 13.682s
found 0 vulnerabilities

UPDATE src/main.ts (391 bytes)
UPDATE src/app/app.module.ts (502 bytes)
UPDATE angular.json (3980 bytes)
UPDATE src/index.html (475 bytes)
UPDATE src/styles.css (181 bytes)

C:\Users\BFuentes\source\repos\testangularmaterial\apptest>ng test
11% building 11/11 modules 0 active13 02 2019 17:36:55.324:WARN [karma]: No captured browser, open http://localhost:9877/
13 02 2019 17:36:55.343:INFO [karma-server]: Karma v3.1.4 server started at http://0.0.0.0:9877/
13 02 2019 17:36:55.345:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
11% building 12/12 modules 0 active13 02 2019 17:36:55.404:INFO [launcher]: Starting browser Chrome
13 02 2019 17:37:02.670:WARN [karma]: No captured browser, open http://localhost:9877/
13 02 2019 17:37:03.474:INFO [Chrome 72.0.3626 (Windows 10.0.0)]: Connected on socket QO7S8D2mpEieNEobAAAA with id 49553117
13 02 2019 17:37:33.903:WARN [Chrome 72.0.3626 (Windows 10.0.0)]: Disconnected (0 times)Client disconnected from CONNECTED state (ping timeout)
Chrome 72.0.3626 (Windows 10.0.0) ERROR
DisconnectedClient disconnected from CONNECTED state (ping timeout)

Chrome 72.0.3626 (Windows 10.0.0) ERROR
DisconnectedClient disconnected from CONNECTED state (ping timeout)
`

[Hartaxfr]

@andrewseguin maybe re-open the issue or open an other one in angular-cli project ?

[jvalkeejarvi]

For me disabling source maps helps.

Check if this comment helps you:
karma-runner/karma#3267 (comment)

[angular-automatic-lock-bot]

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