New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot run tests using Chrome Dev v55 #2125

Closed
ianjoneill opened this Issue Sep 15, 2016 · 15 comments

Comments

Projects
None yet
8 participants
@ianjoneill

ianjoneill commented Sep 15, 2016

  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

This comment has been minimized.

Show comment
Hide comment
@ianjoneill

ianjoneill Sep 15, 2016

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

ianjoneill commented Sep 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jtsom

jtsom Sep 15, 2016

Contributor

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

Contributor

jtsom commented Sep 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ianjoneill

ianjoneill Sep 15, 2016

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

ianjoneill commented Sep 15, 2016

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

@ianjoneill

This comment has been minimized.

Show comment
Hide comment
@ianjoneill

ianjoneill Sep 15, 2016

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.

ianjoneill commented Sep 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jtsom

jtsom Sep 15, 2016

Contributor

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.

Contributor

jtsom commented Sep 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jtsom

jtsom Sep 15, 2016

Contributor

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.

Contributor

jtsom commented Sep 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ianjoneill

ianjoneill Sep 15, 2016

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 commented Sep 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ianjoneill

ianjoneill Sep 16, 2016

Your fix works great!

ianjoneill commented Sep 16, 2016

Your fix works great!

@jtsom

This comment has been minimized.

Show comment
Hide comment
@jtsom

jtsom Sep 16, 2016

Contributor

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

Contributor

jtsom commented Sep 16, 2016

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

@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Sep 21, 2016

Member

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

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?

Member

filipesilva commented Sep 21, 2016

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

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

This comment has been minimized.

Show comment
Hide comment
@juliemr

juliemr Sep 21, 2016

Member

@zzo do you have any insights here?

Member

juliemr commented Sep 21, 2016

@zzo do you have any insights here?

sandikbarr added a commit to PRX/publish.prx.org that referenced this issue Dec 15, 2016

arosh added a commit to arosh/karma-power-assert-typescript-mocha-webpack-sample that referenced this issue Dec 19, 2016

Fix MIME type ('text/x-typescript')
angular/angular-cli#2125 (comment)

```
Refused to execute script from
'http://localhost:9876/base/test/browser/sub_test.ts' because its MIME
type ('video/mp2t') is not executable.
```

seza443 added a commit to GeoHealth/HAppi_mobile that referenced this issue Dec 21, 2016

ebeer added a commit to ebeer/angular2-tdd-examples that referenced this issue Jan 5, 2017

MRHarrison added a commit to MRHarrison/angular-cli that referenced this issue Feb 9, 2017

@ducin

This comment has been minimized.

Show comment
Hide comment
@ducin

ducin May 12, 2017

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.

ducin commented May 12, 2017

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

This comment has been minimized.

Show comment
Hide comment
@beylkhanovdamir

beylkhanovdamir Sep 4, 2017

@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

beylkhanovdamir commented Sep 4, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@bobbyg603

bobbyg603 Sep 20, 2017

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.

bobbyg603 commented Sep 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Xesenix

Xesenix Dec 1, 2017

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

Xesenix commented Dec 1, 2017

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

@NicolasRannou NicolasRannou referenced this issue Jun 7, 2018

Merged

Travis setup #1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment