Cannot run tests using Chrome Dev v55

[ianjoneill]

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

OS: Windows 10 Version 1607 x64
Chrome: 55.0.2859.0 dev-m (64-bit)

1. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

$ node_modules/.bin/ng --version
angular-cli: 1.0.0-beta.14
node: 6.3.1
os: win32 x64

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

$ ng new my-project
$ cd my-project
$ ng test

1. The log given by the failure. Normally this include a stack trace and some
   more information.

Console log:

15 09 2016 10:04:15.346:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
15 09 2016 10:04:15.346:INFO [launcher]: Launching browser Chrome with unlimited concurrency
15 09 2016 10:04:15.369:INFO [launcher]: Starting browser Chrome
15 09 2016 10:04:16.826:INFO [Chrome 55.0.2859 (Windows 10 0.0.0)]: Connected on socket /#xqAYMg_-UhayckFyAAAA with id 24060829
Chrome 55.0.2859 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.002 secs / 0 secs)

Chrome console:

debug.html:1 Refused to execute script from 'http://localhost:9876/base/src/test.ts' because its MIME type ('video/mp2t') is not executable.
debug.js:6 Skipped 0 tests

1. Mention any other details that might be useful.

I think this was probably caused by: https://codereview.chromium.org/2294283002 - is this a Chrome or angular-cli issue? Obviously .ts is a video container format in addition to the typescript format - so I assume that Chrome is blocking it because it thinks it's a video file rather than a typescript file.

ng test worked fine in previous (non-webpack) betas with this version of Chrome, assumedly because test.ts was not injected into the runner.

[ianjoneill]

Looking at the network tab in the chrome dev tools, it looks like test.ts was served as a video file - so it's not Chrome's fault. The full response headers for the file were:

HTTP/1.1 200 OK
Content-Type: video/mp2t
Cache-Control: no-cache
Pragma: no-cache
Expires: Thu, 01 Jan 1970 00:00:00 GMT
Date: Thu, 15 Sep 2016 09:44:08 GMT
Connection: keep-alive
Transfer-Encoding: chunked

[jtsom]

I would guess that the .ts file should not have been served at all, but a compiled / transpired .js file. So somewhere the compilation of the .ts file is not happening. I've reported this exact issue, but have had no responses to my report. #2031

[ianjoneill]

Ah - I didn't see that - the initial description did not have anything to do with the issue - probably why I missed it.

[ianjoneill]

Note that the tests work fine in both current release (v53) and beta (v54) versions of Chrome, in addition to current release/beta/dev versions of Firefox.

[jtsom]

Having the same problem on Chrome on OS X, Version 55.0.2859.0 dev (64-bit)

I don't see the error in Safari, (Safari Technology Preview Release 12 (Safari 9.1.2, WebKit 11603.1.3)) and Safari (Version 9.1.3 (11601.7.8))

So, it does look like a Chrome issue.

[jtsom]

I figured out a work around. In the karma.conf.js file, add:

    mime: {
      'text/x-typescript': ['ts','tsx']
    },

This tells the Karma server to serve the .ts files with a text/x-typescript mime type. That seems to make it work.

[ianjoneill]

Seems worthy of a pull-request to me.

I'll test it out your proposed patch tomorrow at around UTC 8:00 and report back - but reading over the karma docs, it looks like it should work 😃.

[ianjoneill]

Your fix works great!

[jtsom]

Cool! So if I can figure the steps to make a pull request I'll do it :)

[filipesilva]

I can verify that although it works on Chrome 53, it does show the Content-Type as video:

The file seems to be served as .ts but containing only ES5 code. This might be a problem with how Karma serves files that undergo processing... @juliemr could you weigh in perhaps?

[juliemr]

@zzo do you have any insights here?