<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
2.0.0 release<br>
When trying to run unit tests with karma, test_bed.js is bundled by karma as part of karam-test-shim.js.  But the contents of test_bed.js are uncompiled TypeScript:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
import { Injector, NgModule, NgZone, OpaqueToken } from '@angular/core';
import { AsyncTestCompleter } from './async_test_completer';
import { ComponentFixture } from './component_fixture';
import { ListWrapper } from './facade/collection';
import { FunctionWrapper, stringify } from './facade/lang';
import { TestingCompilerFactory } from './test_compiler';
var UNDEFINED = new Object();
..."><pre class="notranslate"><span class="pl-c">/**</span>
<span class="pl-c"> * <span class="pl-k">@license</span></span>
<span class="pl-c"> * Copyright Google Inc. All Rights Reserved.</span>
<span class="pl-c"> *</span>
<span class="pl-c"> * Use of this source code is governed by an MIT-style license that can be</span>
<span class="pl-c"> * found in the LICENSE file at https://angular.io/license</span>
<span class="pl-c"> */</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Injector</span><span class="pl-kos">,</span> <span class="pl-v">NgModule</span><span class="pl-kos">,</span> <span class="pl-v">NgZone</span><span class="pl-kos">,</span> <span class="pl-v">OpaqueToken</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">AsyncTestCompleter</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./async_test_completer'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">ComponentFixture</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./component_fixture'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">ListWrapper</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./facade/collection'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">FunctionWrapper</span><span class="pl-kos">,</span> <span class="pl-s1">stringify</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./facade/lang'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">TestingCompilerFactory</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./test_compiler'</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-c1">UNDEFINED</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Object</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
...</pre></div>
<p dir="auto">This results in the following error:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word 'import'
  at karma-test-shim.js:3833
Chrome 53.0.2785 (Mac OS X 10.11.6) ERROR
  Uncaught SyntaxError: Unexpected token import
  at http://localhost:9876/context.html:8"><pre class="notranslate">PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word <span class="pl-s"><span class="pl-pds">'</span>import<span class="pl-pds">'</span></span>
  at karma-test-shim.js:3833
Chrome 53.0.2785 (Mac OS X 10.11.6) ERROR
  Uncaught SyntaxError: Unexpected token import
  at http://localhost:9876/context.html:8</pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
test_bed.js should be compiled to JavaScript before inclusion by karma.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
webpack/karma/angular setup using <code class="notranslate">npm test</code></p>
<p dir="auto">webpack.test.config:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="process.env.npm_lifecycle_event = 'test';
var webpack = require('webpack'),
basicConf = {},
path = require('path');

var NODE_MODULES = root(&quot;node_modules&quot;);

function root(args) {
args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}

basicConf.entry = {};
basicConf.devtool = &quot;eval&quot;;
basicConf.debug = true;

basicConf.resolve = {
    cache: true,
    fallback: [ NODE_MODULES ],
    modulesDirectories: [ NODE_MODULES ],
    root: [ root(&quot;&quot;) ],
    extensions: [&quot;&quot;, &quot;.ts&quot;, &quot;.js&quot;, &quot;.json&quot;, &quot;.css&quot;, &quot;.scss&quot;, &quot;.html&quot;]
};

basicConf.module = {
    loaders: [
        {
            test: /\.ts$/,
            loader: &quot;ts&quot;,
            query: {
                &quot;ignoreDiagnostics&quot;: [
                    2403, // 2403 -&gt; Subsequent variable declarations
                    2300, // 2300 -&gt; Duplicate identifier
                    2374, // 2374 -&gt; Duplicate number index signature
                    2375, // 2375 -&gt; Duplicate string index signature
                    2502  // 2502 -&gt; Referenced directly or indirectly
                ]
            },
            exclude: [ /node_modules\/?!(@angular)/ ]
        },

        {test: /\.scss$/, loader: &quot;null&quot;},
        {test: /\.css$/, loader: &quot;null&quot;},
        {test: /\.html$/, loader: &quot;raw&quot;}
    ],
    postLoaders: [
        {
            test: /\.(js|ts)$/,
            include: path.resolve(&quot;.&quot;),
            loader: &quot;istanbul-instrumenter-loader&quot;,
            exclude: [/.+-spec\.ts$/, /\.e2e\.ts$/, NODE_MODULES]
        }
    ]
};

module.exports = basicConf;"><pre class="notranslate"><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">npm_lifecycle_event</span> <span class="pl-c1">=</span> <span class="pl-s">'test'</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">webpack</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'webpack'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
<span class="pl-s1">basicConf</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-c1">NODE_MODULES</span> <span class="pl-c1">=</span> <span class="pl-en">root</span><span class="pl-kos">(</span><span class="pl-s">"node_modules"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">root</span><span class="pl-kos">(</span><span class="pl-s1">args</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-s1">args</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-c1">slice</span><span class="pl-kos">.</span><span class="pl-en">call</span><span class="pl-kos">(</span><span class="pl-smi">arguments</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-c1">join</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-s1">path</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">__dirname</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">concat</span><span class="pl-kos">(</span><span class="pl-s1">args</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-s1">basicConf</span><span class="pl-kos">.</span><span class="pl-c1">entry</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-s1">basicConf</span><span class="pl-kos">.</span><span class="pl-c1">devtool</span> <span class="pl-c1">=</span> <span class="pl-s">"eval"</span><span class="pl-kos">;</span>
<span class="pl-s1">basicConf</span><span class="pl-kos">.</span><span class="pl-c1">debug</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>

<span class="pl-s1">basicConf</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">cache</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">fallback</span>: <span class="pl-kos">[</span> <span class="pl-c1">NODE_MODULES</span> <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">modulesDirectories</span>: <span class="pl-kos">[</span> <span class="pl-c1">NODE_MODULES</span> <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">root</span>: <span class="pl-kos">[</span> <span class="pl-en">root</span><span class="pl-kos">(</span><span class="pl-s">""</span><span class="pl-kos">)</span> <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">extensions</span>: <span class="pl-kos">[</span><span class="pl-s">""</span><span class="pl-kos">,</span> <span class="pl-s">".ts"</span><span class="pl-kos">,</span> <span class="pl-s">".js"</span><span class="pl-kos">,</span> <span class="pl-s">".json"</span><span class="pl-kos">,</span> <span class="pl-s">".css"</span><span class="pl-kos">,</span> <span class="pl-s">".scss"</span><span class="pl-kos">,</span> <span class="pl-s">".html"</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-s1">basicConf</span><span class="pl-kos">.</span><span class="pl-c1">module</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">loaders</span>: <span class="pl-kos">[</span>
        <span class="pl-kos">{</span>
            <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>ts<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
            <span class="pl-c1">loader</span>: <span class="pl-s">"ts"</span><span class="pl-kos">,</span>
            <span class="pl-c1">query</span>: <span class="pl-kos">{</span>
                <span class="pl-s">"ignoreDiagnostics"</span>: <span class="pl-kos">[</span>
                    <span class="pl-c1">2403</span><span class="pl-kos">,</span> <span class="pl-c">// 2403 -&gt; Subsequent variable declarations</span>
                    <span class="pl-c1">2300</span><span class="pl-kos">,</span> <span class="pl-c">// 2300 -&gt; Duplicate identifier</span>
                    <span class="pl-c1">2374</span><span class="pl-kos">,</span> <span class="pl-c">// 2374 -&gt; Duplicate number index signature</span>
                    <span class="pl-c1">2375</span><span class="pl-kos">,</span> <span class="pl-c">// 2375 -&gt; Duplicate string index signature</span>
                    <span class="pl-c1">2502</span>  <span class="pl-c">// 2502 -&gt; Referenced directly or indirectly</span>
                <span class="pl-kos">]</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c1">exclude</span>: <span class="pl-kos">[</span> <span class="pl-pds"><span class="pl-c1">/</span>node_modules<span class="pl-cce">\/</span>?!<span class="pl-kos">(</span>@angular<span class="pl-kos">)</span><span class="pl-c1">/</span></span> <span class="pl-kos">]</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>

        <span class="pl-kos">{</span><span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>scss<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c1">loader</span>: <span class="pl-s">"null"</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">{</span><span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>css<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c1">loader</span>: <span class="pl-s">"null"</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">{</span><span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>html<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c1">loader</span>: <span class="pl-s">"raw"</span><span class="pl-kos">}</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">postLoaders</span>: <span class="pl-kos">[</span>
        <span class="pl-kos">{</span>
            <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>js<span class="pl-c1">|</span>ts<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
            <span class="pl-c1">include</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"."</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
            <span class="pl-c1">loader</span>: <span class="pl-s">"istanbul-instrumenter-loader"</span><span class="pl-kos">,</span>
            <span class="pl-c1">exclude</span>: <span class="pl-kos">[</span><span class="pl-pds"><span class="pl-c1">/</span>.<span class="pl-c1">+</span>-spec<span class="pl-cce">\.</span>ts<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>e2e<span class="pl-cce">\.</span>ts<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c1">NODE_MODULES</span><span class="pl-kos">]</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">basicConf</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">karma.conf:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Karma configuration
// Generated on Tue Mar 01 2016 10:24:10 GMT-0700 (Mountain Standard Time)

var webpackConfig = require(&quot;./webpack.test.config&quot;);

module.exports = function(config){
  var _config = {
    basePath: &quot;.&quot;,
    frameworks: [&quot;jasmine&quot;],
    files: [
      {pattern: &quot;karma-test-shim.js&quot;, watched: false}
    ],
    exclude: [],
    preprocessors: {
      &quot;karma-test-shim.js&quot;: [&quot;webpack&quot;]
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      // webpack-dev-middleware configuration
      // i. e.
      stats: &quot;errors-only&quot;
    },
    webpackServer: {
      noInfo: true // please don&quot;t spam the console when running in karma!
    },
    reporters: [&quot;mocha&quot;, &quot;coverage&quot;],
    coverageReporter: {
      dir: &quot;../coverage/&quot;,
      reporters: [
        {type: &quot;text-summary&quot;, subdir: &quot;./&quot;},
        {type: &quot;html&quot;, subdir: &quot;html&quot;},
        {type: &quot;teamcity&quot;, subdir: &quot;./&quot;}
      ]
    },
    // web server port
    port: 9876,
    colors: true,

    // Suppress all console output from tested code:
    client: {
        captureConsole: false
    },

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_ERROR,
    browsers: [&quot;Chrome&quot;, &quot;PhantomJSDebug&quot;],
    autoWatch: true,
    singleRun: false,
    customLaunchers: {
      &quot;PhantomJSDebug&quot;: {
        base: &quot;PhantomJS&quot;,
        options: {
          windowName: &quot;myWindow&quot;,
          settings: {
            webSecurityEnabled: false
          }
        },
        flags: [&quot;--load-images=true&quot;],
        debug: true
      }
    },
    phantomjsLauncher: {
      exitOnResourceError: true
    },
    concurrency: Infinity
  };

  config.set(_config);
}"><pre class="notranslate"><span class="pl-c">// Karma configuration</span>
<span class="pl-c">// Generated on Tue Mar 01 2016 10:24:10 GMT-0700 (Mountain Standard Time)</span>

<span class="pl-k">var</span> <span class="pl-s1">webpackConfig</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"./webpack.test.config"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">_config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">basePath</span>: <span class="pl-s">"."</span><span class="pl-kos">,</span>
    <span class="pl-c1">frameworks</span>: <span class="pl-kos">[</span><span class="pl-s">"jasmine"</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">files</span>: <span class="pl-kos">[</span>
      <span class="pl-kos">{</span><span class="pl-c1">pattern</span>: <span class="pl-s">"karma-test-shim.js"</span><span class="pl-kos">,</span> <span class="pl-c1">watched</span>: <span class="pl-c1">false</span><span class="pl-kos">}</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">exclude</span>: <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">preprocessors</span>: <span class="pl-kos">{</span>
      <span class="pl-s">"karma-test-shim.js"</span>: <span class="pl-kos">[</span><span class="pl-s">"webpack"</span><span class="pl-kos">]</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">webpack</span>: <span class="pl-s1">webpackConfig</span><span class="pl-kos">,</span>
    <span class="pl-c1">webpackMiddleware</span>: <span class="pl-kos">{</span>
      <span class="pl-c">// webpack-dev-middleware configuration</span>
      <span class="pl-c">// i. e.</span>
      <span class="pl-c1">stats</span>: <span class="pl-s">"errors-only"</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">webpackServer</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">noInfo</span>: <span class="pl-c1">true</span> <span class="pl-c">// please don"t spam the console when running in karma!</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">reporters</span>: <span class="pl-kos">[</span><span class="pl-s">"mocha"</span><span class="pl-kos">,</span> <span class="pl-s">"coverage"</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">coverageReporter</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">dir</span>: <span class="pl-s">"../coverage/"</span><span class="pl-kos">,</span>
      <span class="pl-c1">reporters</span>: <span class="pl-kos">[</span>
        <span class="pl-kos">{</span><span class="pl-c1">type</span>: <span class="pl-s">"text-summary"</span><span class="pl-kos">,</span> <span class="pl-c1">subdir</span>: <span class="pl-s">"./"</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">{</span><span class="pl-c1">type</span>: <span class="pl-s">"html"</span><span class="pl-kos">,</span> <span class="pl-c1">subdir</span>: <span class="pl-s">"html"</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">{</span><span class="pl-c1">type</span>: <span class="pl-s">"teamcity"</span><span class="pl-kos">,</span> <span class="pl-c1">subdir</span>: <span class="pl-s">"./"</span><span class="pl-kos">}</span>
      <span class="pl-kos">]</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c">// web server port</span>
    <span class="pl-c1">port</span>: <span class="pl-c1">9876</span><span class="pl-kos">,</span>
    <span class="pl-c1">colors</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>

    <span class="pl-c">// Suppress all console output from tested code:</span>
    <span class="pl-c1">client</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">captureConsole</span>: <span class="pl-c1">false</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>

    <span class="pl-c">// level of logging</span>
    <span class="pl-c">// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG</span>
    <span class="pl-c1">logLevel</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">LOG_ERROR</span><span class="pl-kos">,</span>
    <span class="pl-c1">browsers</span>: <span class="pl-kos">[</span><span class="pl-s">"Chrome"</span><span class="pl-kos">,</span> <span class="pl-s">"PhantomJSDebug"</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">autoWatch</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">singleRun</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-c1">customLaunchers</span>: <span class="pl-kos">{</span>
      <span class="pl-s">"PhantomJSDebug"</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">base</span>: <span class="pl-s">"PhantomJS"</span><span class="pl-kos">,</span>
        <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">windowName</span>: <span class="pl-s">"myWindow"</span><span class="pl-kos">,</span>
          <span class="pl-c1">settings</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">webSecurityEnabled</span>: <span class="pl-c1">false</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-c1">flags</span>: <span class="pl-kos">[</span><span class="pl-s">"--load-images=true"</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">debug</span>: <span class="pl-c1">true</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">phantomjsLauncher</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">exitOnResourceError</span>: <span class="pl-c1">true</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">concurrency</span>: <span class="pl-v">Infinity</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s1">_config</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">karma-test-shim.js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/*
 * When testing with webpack and ES6, we have to do some extra
 * things to get testing to work right. Because we are gonna write tests
 * in ES6 too, we have to compile those as well. That's handled in
 * karma.conf.js with the karma-webpack plugin. This is the entry
 * file for webpack test. Just like webpack will create a bundle.js
 * file for our client, when we run test, it will compile and bundle them
 * all here! Crazy huh. So we need to do some setup
 */
Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('core-js/es7/reflect');

// Typescript emit helpers polyfill
require('ts-helpers');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy'); // since zone.js 0.6.15
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch'); // put here since zone.js 0.6.14
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

// RxJS
require('rxjs/Rx');

require(&quot;material-design-lite/dist/material.min.js&quot;);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(
  browser.BrowserDynamicTestingModule,
  browser.platformBrowserDynamicTesting()
);

/*
 * Ok, this is kinda crazy. We can use the context method on
 * require that webpack created in order to tell webpack
 * what files we actually want to require or import.
 * Below, context will be a function/object with file names as keys.
 * Using that regex we are saying look in ../src then find
 * any file that ends with spec.ts and get its path. By passing in true
 * we say do this recursively
 */
var testContext = require.context('.', true, /.+-spec\.ts/);

/*
 * get all the files, for each file, call the context function
 * that will require the file and load it up here. Context will
 * loop and require those spec files here
 */
function requireAll(requireContext) {
  return requireContext.keys().map(requireContext);
}

// requires and returns all modules that match
var modules = requireAll(testContext);"><pre class="notranslate"><span class="pl-c">/*</span>
<span class="pl-c"> * When testing with webpack and ES6, we have to do some extra</span>
<span class="pl-c"> * things to get testing to work right. Because we are gonna write tests</span>
<span class="pl-c"> * in ES6 too, we have to compile those as well. That's handled in</span>
<span class="pl-c"> * karma.conf.js with the karma-webpack plugin. This is the entry</span>
<span class="pl-c"> * file for webpack test. Just like webpack will create a bundle.js</span>
<span class="pl-c"> * file for our client, when we run test, it will compile and bundle them</span>
<span class="pl-c"> * all here! Crazy huh. So we need to do some setup</span>
<span class="pl-c"> */</span>
<span class="pl-v">Error</span><span class="pl-kos">.</span><span class="pl-c1">stackTraceLimit</span> <span class="pl-c1">=</span> <span class="pl-v">Infinity</span><span class="pl-kos">;</span>

<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'core-js/es6'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'core-js/es7/reflect'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Typescript emit helpers polyfill</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'ts-helpers'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'zone.js/dist/zone'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'zone.js/dist/long-stack-trace-zone'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'zone.js/dist/proxy'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// since zone.js 0.6.15</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'zone.js/dist/sync-test'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'zone.js/dist/jasmine-patch'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// put here since zone.js 0.6.14</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'zone.js/dist/async-test'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'zone.js/dist/fake-async-test'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// RxJS</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'rxjs/Rx'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"material-design-lite/dist/material.min.js"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-s1">testing</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'@angular/core/testing'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">browser</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'@angular/platform-browser-dynamic/testing'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">testing</span><span class="pl-kos">.</span><span class="pl-c1">TestBed</span><span class="pl-kos">.</span><span class="pl-en">initTestEnvironment</span><span class="pl-kos">(</span>
  <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-c1">BrowserDynamicTestingModule</span><span class="pl-kos">,</span>
  <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">platformBrowserDynamicTesting</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">/*</span>
<span class="pl-c"> * Ok, this is kinda crazy. We can use the context method on</span>
<span class="pl-c"> * require that webpack created in order to tell webpack</span>
<span class="pl-c"> * what files we actually want to require or import.</span>
<span class="pl-c"> * Below, context will be a function/object with file names as keys.</span>
<span class="pl-c"> * Using that regex we are saying look in ../src then find</span>
<span class="pl-c"> * any file that ends with spec.ts and get its path. By passing in true</span>
<span class="pl-c"> * we say do this recursively</span>
<span class="pl-c"> */</span>
<span class="pl-k">var</span> <span class="pl-s1">testContext</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">context</span><span class="pl-kos">(</span><span class="pl-s">'.'</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span>.<span class="pl-c1">+</span>-spec<span class="pl-cce">\.</span>ts<span class="pl-c1">/</span></span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">/*</span>
<span class="pl-c"> * get all the files, for each file, call the context function</span>
<span class="pl-c"> * that will require the file and load it up here. Context will</span>
<span class="pl-c"> * loop and require those spec files here</span>
<span class="pl-c"> */</span>
<span class="pl-k">function</span> <span class="pl-en">requireAll</span><span class="pl-kos">(</span><span class="pl-s1">requireContext</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-s1">requireContext</span><span class="pl-kos">.</span><span class="pl-en">keys</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">requireContext</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-c">// requires and returns all modules that match</span>
<span class="pl-k">var</span> <span class="pl-s1">modules</span> <span class="pl-c1">=</span> <span class="pl-en">requireAll</span><span class="pl-kos">(</span><span class="pl-s1">testContext</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Unit Testing broken</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
npm 3.10.2<br>
node 6.5.0<br>
typescript 2.0.3<br>
webpack 1.13.2</p>
<ul dir="auto">
<li><strong>Angular version:</strong><br>
2.0.0</li>
<li><strong>Browser:</strong><br>
PhantomJS 2.1.1</li>
<li><strong>Language:</strong><br>
TypeScript/JavaScript</li>
</ul>
<p dir="auto">We have been designing a system based on Angular 2.0 and going thru various use-cases. One  common use-case is infinite scroll of a large collection. At a high level we understand how it could be done in Angular 2.0. But things get complicated when we bring data driven rendering into picture (data to view mapping complicated enough to justify the use of imperative logic ).</p>
<p dir="auto">It makes us nervous when we hear - "we should not be touching the DOM  when using Angular". In this case, it means - create super-set template and pre-process  data to give the desired effect. Implementing imperative logic in the data-world makes perfect sense until you notice that it leads to a complicated state machine of auxiliary data to give the desired effect to view. One example of auxiliary data is - additional variables required to "show-hide" elements of super-set template. Does it not become more convoluted than DOM manipulation within rendering logic of a View?</p>
<p dir="auto">Is there another construct of Angular or approach that we should be looking for this use case?</p>