Issue 1:
I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

2.0.0 release

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:

/**
* @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();
...

This results in the following error:

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

Expected behavior

test_bed.js should be compiled to JavaScript before inclusion by karma.

Reproduction of the problem

webpack/karma/angular setup using npm test

webpack.test.config:

process.env.npm_lifecycle_event = 'test';
var webpack = require('webpack'),
basicConf = {},
path = require('path');

var NODE_MODULES = root("node_modules");

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

basicConf.entry = {};
basicConf.devtool = "eval";
basicConf.debug = true;

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

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

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

module.exports = basicConf;

karma.conf:

// Karma configuration
// Generated on Tue Mar 01 2016 10:24:10 GMT-0700 (Mountain Standard Time)

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

module.exports = function(config){
var _config = {
basePath: ".",
frameworks: ["jasmine"],
files: [
{pattern: "karma-test-shim.js", watched: false}
],
exclude: [],
preprocessors: {
"karma-test-shim.js": ["webpack"]
},
webpack: webpackConfig,
webpackMiddleware: {
// webpack-dev-middleware configuration
// i. e.
stats: "errors-only"
},
webpackServer: {
noInfo: true // please don"t spam the console when running in karma!
},
reporters: ["mocha", "coverage"],
coverageReporter: {
dir: "../coverage/",
reporters: [
{type: "text-summary", subdir: "./"},
{type: "html", subdir: "html"},
{type: "teamcity", subdir: "./"}
]
},
// 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: ["Chrome", "PhantomJSDebug"],
autoWatch: true,
singleRun: false,
customLaunchers: {
"PhantomJSDebug": {
base: "PhantomJS",
options: {
windowName: "myWindow",
settings: {
webSecurityEnabled: false
}
},
flags: ["--load-images=true"],
debug: true
}
},
phantomjsLauncher: {
exitOnResourceError: true
},
concurrency: Infinity
};

config.set(_config);
}

karma-test-shim.js:

/*
* 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("material-design-lite/dist/material.min.js");

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);

What is the motivation / use case for changing the behavior?

Unit Testing broken

Please tell us about your environment:

npm 3.10.2

node 6.5.0

typescript 2.0.3

webpack 1.13.2

Angular version:

2.0.0

Browser:

PhantomJS 2.1.1

Language:

TypeScript/JavaScript

Issue 2:
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 ).

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?

Is there another construct of Angular or approach that we should be looking for this use case?