Angular-cli: 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?

[ducin]

It's not an issue of angular-cli, it's an issue of typescript/karma.
I'm not using angular-cli, but this solution worked for me as well.

[beylkhanovdamir]

@jtsom

but what's if I don't use karma, however, such errors in *.ts files like MIME type is not executable are exists too
I'm using Ionic v1 with cordova and angular

[bobbyg603]

FWIW we got this error when moving test files from one directory to another and not updating/adding an entry in the preprocessors array.

In other words we updated this:
preprocessors: { './src/*.ts': ['karma-typescript'] },

to this:
preprocessors: { './src/*.ts': ['karma-typescript'], './test/*.ts': ['karma-typescript'] },

and the error went away.

[Xesenix]

I had this error for running webpack with awesome-typescript-loader and karma mime type option in karma conf fixed it:

// Karma configuration
const webpack = require('./webpack.config.test.js');
module.exports = function (config) {
    //console.debug('karma config');process.abort();
    config.set({
        basePath: '',
        frameworks: ['jasmine', 'sinon'],
        files: [{
            pattern: './src/main.test.ts',
            included: true,
        }],
        exclude: [],
        preprocessors: {
            './src/**/*.ts': ['webpack']
        },
        webpack,
        reporters: ['progress'],
        browsers: ['Chrome'],

        // fix typescript serving video/mp2t mime type
        mime: {
            'text/x-typescript': ['ts','tsx']
        },
    })
}

and webpack config:

module.exports = {
    entry: [
        './src/main.test.ts'
    ],
    output: {
        filename: './dist/test.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(t|j)sx?$/,
                loaders: [{
                    loader: 'awesome-typescript-loader',
                    options: {
                        configFileName: 'tsconfig.test.json'
                    }
                }]
            }
        ]
    },
    externals: {
        'react': 'React',
        'resct-dom': 'ReactDOM'
    }
}

typescript config:

{
    "compilerOptions": {
        /* Basic Options */
        "target": "es5",
        "module": "commonjs",
        "lib": [
            "es2017",
            "es2016",
            "es2015",
            "dom"
        ],
        "jsx": "react",
        "declaration": false,
        "sourceMap": true,
        "outDir": "./dist/out-tsc",
        "removeComments": true,

        /* Strict Type-Checking Options */
        "strict": true,
        "strictNullChecks": true,
        "noImplicitThis": true,

        /* Additional Checks */
        "noUnusedLocals": true,
        "noImplicitReturns": true,
        "moduleResolution": "node",
        "baseUrl": "./src",
        "paths": {
            "app/*": ["app/*"],
            "lib/*": ["lib/*"],
            "*": ["*"]
        },
        "typeRoots": [
            "node_modules/@types"
        ],
        "types": ["jasmine", "reflect-metadata"],

        /* Experimental Options */
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "plugins": [{
            "name": "tslint-language-service"
        }]
    },
    "files": [
        "**/*.spec.ts"
    ],
    "include": [
        "**/*.ts"
    ],
    "awesomeTypescriptLoaderOptions": {
        "forceIsolatedModules": true,
        "useTranspileModule": true,
        "useBabel": true,
        "useCache": true,
        "usePrecompiledFiles": true
    }
}

[angular-automatic-lock-bot[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._}