feat(browser): use AppModules for bootstrap in the browser

This introduces the `BrowserModule` to be used for long form
bootstrap and offline compile bootstrap:

```
@AppModule({
  modules: [BrowserModule],
  precompile: [MainComponent],
  providers: […], // additional providers
  directives: […], // additional platform directives
  pipes: […] // additional platform pipes
})
class MyModule {
  constructor(appRef: ApplicationRef) {
    appRef.bootstrap(MainComponent);
  }
}

// offline compile
import {bootstrapModuleFactory} from ‘@angular/platform-browser’;
bootstrapModuleFactory(MyModuleNgFactory);

// runtime compile long form
import {bootstrapModule} from ‘@angular/platform-browser-dynamic’;
bootstrapModule(MyModule);
```

The short form, `bootstrap(...)`, can now creates a module on the fly,
given `directives`, `pipes, `providers`, `precompile` and `modules`
properties.

Related changes:
- make `SanitizationService`, `SecurityContext` public in `@angular/core` so that the offline compiler can resolve the token
- move `AnimationDriver` to `platform-browser` and make it
  public so that the offline compiler can resolve the token

BREAKING CHANGES:
- short form bootstrap does no longer allow
  to inject compiler internals (i.e. everything 
  from `@angular/compiler). Inject `Compiler` instead.
  To provide custom providers for the compiler,
  create a custom compiler via `browserCompiler({providers: [...]})`
  and pass that into the `bootstrap` method.

modules/@angular/compiler-cli/integrationtest/src/a/multiple_components.ts

@@ -12,7 +12,7 @@ import {Component} from '@angular/core';
   selector: 'my-comp',
   template: '<div></div>',
 })
-export class MyComp {
+export class MultipleComponentsMyComp {
 }
 
 @Component({

modules/@angular/compiler-cli/integrationtest/src/basic.ts

@@ -9,16 +9,16 @@
 import {FORM_DIRECTIVES, NgFor, NgIf} from '@angular/common';
 import {Component, Inject} from '@angular/core';
 
-import {MyComp} from './a/multiple_components';
+import {MultipleComponentsMyComp} from './a/multiple_components';
 
 @Component({
   selector: 'basic',
   templateUrl: './basic.html',
   styles: ['.red { color: red }'],
   styleUrls: ['./basic.css'],
-  directives: [MyComp, FORM_DIRECTIVES, NgIf, NgFor]
+  directives: [MultipleComponentsMyComp, FORM_DIRECTIVES, NgIf, NgFor]
 })
-export class Basic {
+export class BasicComp {
   ctxProp: string;
   ctxBool: boolean;
   ctxArr: any[] = [];

modules/@angular/compiler-cli/integrationtest/src/bootstrap.ts

@@ -6,12 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ReflectiveInjector, coreBootstrap} from '@angular/core';
-import {BROWSER_APP_PROVIDERS, browserPlatform} from '@angular/platform-browser';
+import {browserPlatform} from '@angular/platform-browser';
+import {BasicComp} from './basic';
+import {MainModuleNgFactory} from './module.ngfactory';
 
-import {Basic} from './basic';
-import {BasicNgFactory} from './basic.ngfactory';
-
-const appInjector =
-    ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, browserPlatform().injector);
-coreBootstrap(BasicNgFactory, appInjector);
+MainModuleNgFactory.create().instance.appRef.bootstrap(BasicComp);

modules/@angular/compiler-cli/integrationtest/src/module.ts

@@ -0,0 +1,24 @@
+/**
+ * @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 {AppModule, ApplicationRef} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {AnimateCmp} from './animate';
+import {BasicComp} from './basic';
+import {CompWithPrecompile} from './precompile';
+import {ProjectingComp} from './projection';
+import {CompWithChildQuery} from './queries';
+
+@AppModule({
+  modules: [BrowserModule],
+  precompile: [AnimateCmp, BasicComp, CompWithPrecompile, ProjectingComp, CompWithChildQuery]
+})
+export class MainModule {
+  constructor(public appRef: ApplicationRef) {}
+}

modules/@angular/compiler-cli/integrationtest/src/module_fixtures.ts

@@ -8,6 +8,7 @@
 
 import {LowerCasePipe, NgIf} from '@angular/common';
 import {AppModule, Component, ComponentFactoryResolver, Injectable} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
 
 @Injectable()
 export class SomeService {
@@ -39,7 +40,7 @@ export class NestedModule {
   pipes: [LowerCasePipe],
   providers: [SomeService],
   precompile: [SomeComp],
-  modules: [NestedModule]
+  modules: [NestedModule, BrowserModule]
 })
 export class SomeModule {
 }
@@ -48,6 +49,7 @@ export class SomeModule {
   directives: [NgIf],
   pipes: [LowerCasePipe],
   precompile: [ParentComp],
+  modules: [BrowserModule]
 })
 export class SomeModuleUsingParentComp {
 }

modules/@angular/compiler-cli/integrationtest/src/precompile.ts

@@ -7,12 +7,9 @@
  */
 
 import {Component, ComponentFactoryResolver, Inject, OpaqueToken} from '@angular/core';
+import {BasicComp} from './basic';
 
-@Component({selector: 'cmp', template: ''})
-export class SomeComp {
-}
-
-@Component({selector: 'cmp-precompile', template: '', precompile: [SomeComp]})
+@Component({selector: 'cmp-precompile', template: '', precompile: [BasicComp]})
 export class CompWithPrecompile {
   constructor(public cfr: ComponentFactoryResolver) {}
 }

modules/@angular/compiler-cli/integrationtest/src/projection.ts

@@ -9,13 +9,13 @@
 import {Component} from '@angular/core';
 
 @Component({selector: 'comp-with-proj', template: '<ng-content></ng-content>'})
-export class CompWithProjection {
+export class CompWithNgContent {
 }
 
 @Component({
   selector: 'main',
   template: '<comp-with-proj><span greeting="Hello world!"></span></comp-with-proj>',
-  directives: [CompWithProjection]
+  directives: [CompWithNgContent]
 })
-export class MainComp {
+export class ProjectingComp {
 }

modules/@angular/compiler-cli/integrationtest/test/animate_spec.ts

@@ -5,19 +5,10 @@
  * 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
  */
-
-require('reflect-metadata');
-require('zone.js/dist/zone-node.js');
-require('zone.js/dist/long-stack-trace-zone.js');
-
-import {AnimateCmpNgFactory} from '../src/animate.ngfactory';
-import {ReflectiveInjector, DebugElement, getDebugNode, lockRunMode} from '@angular/core';
-import {serverPlatform} from '@angular/platform-server';
-import {BROWSER_APP_PROVIDERS} from '@angular/platform-browser';
-
-
-// Need to lock the mode explicitely as this test is not using Angular's testing framework.
-lockRunMode();
+import './init';
+import {DebugElement} from '@angular/core';
+import {AnimateCmp} from '../src/animate';
+import {createComponent} from './util';
 
 describe('template codegen output', () => {
   function findTargetElement(elm: DebugElement): DebugElement {
@@ -27,23 +18,21 @@ describe('template codegen output', () => {
   }
 
   it('should apply the animate states to the element', (done) => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var comp = AnimateCmpNgFactory.create(appInjector);
-    var debugElement = <DebugElement>getDebugNode(comp.location.nativeElement);
+    const compFixture = createComponent(AnimateCmp);
+    var debugElement = compFixture.debugElement;
 
     var targetDebugElement = findTargetElement(<DebugElement>debugElement);
 
-    comp.instance.setAsOpen();
-    comp.changeDetectorRef.detectChanges();
+    compFixture.componentInstance.setAsOpen();
+    compFixture.detectChanges();
 
     setTimeout(() => {
       expect(targetDebugElement.styles['height']).toEqual(null);
       expect(targetDebugElement.styles['borderColor']).toEqual('green');
       expect(targetDebugElement.styles['color']).toEqual('green');
 
-      comp.instance.setAsClosed();
-      comp.changeDetectorRef.detectChanges();
+      compFixture.componentInstance.setAsClosed();
+      compFixture.detectChanges();
 
       setTimeout(() => {
         expect(targetDebugElement.styles['height']).toEqual('0px');
@@ -55,23 +44,21 @@ describe('template codegen output', () => {
   });
 
   it('should apply the default animate state to the element', (done) => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var comp = AnimateCmpNgFactory.create(appInjector);
-    var debugElement = <DebugElement>getDebugNode(comp.location.nativeElement);
+    const compFixture = createComponent(AnimateCmp);
+    var debugElement = compFixture.debugElement;
 
     var targetDebugElement = findTargetElement(<DebugElement>debugElement);
 
-    comp.instance.setAsSomethingElse();
-    comp.changeDetectorRef.detectChanges();
+    compFixture.componentInstance.setAsSomethingElse();
+    compFixture.detectChanges();
 
     setTimeout(() => {
       expect(targetDebugElement.styles['height']).toEqual(null);
       expect(targetDebugElement.styles['borderColor']).toEqual('black');
       expect(targetDebugElement.styles['color']).toEqual('black');
 
-      comp.instance.setAsClosed();
-      comp.changeDetectorRef.detectChanges();
+      compFixture.componentInstance.setAsClosed();
+      compFixture.detectChanges();
 
       setTimeout(() => {
         expect(targetDebugElement.styles['height']).not.toEqual(null);

modules/@angular/compiler-cli/integrationtest/test/app_module_spec.ts

@@ -5,68 +5,52 @@
  * 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 {ComponentFactoryResolver, DebugElement, ReflectiveInjector, getDebugNode, lockRunMode} from '@angular/core';
-import {BROWSER_APP_PROVIDERS, By} from '@angular/platform-browser';
-import {serverPlatform} from '@angular/platform-server';
-
-import {NestedModule, NestedService, ParentComp, SomeComp, SomeModule, SomeService} from '../src/app_module';
-import {SomeModuleNgFactory, SomeModuleUsingParentCompNgFactory} from '../src/app_module.ngfactory';
-
-
-// Need to lock the mode explicitely as this test is not using Angular's testing framework.
-lockRunMode();
+import './init';
+import {NestedModule, NestedService, ParentComp, SomeComp, SomeModule, SomeService} from '../src/module_fixtures';
+import {SomeModuleNgFactory, SomeModuleUsingParentCompNgFactory} from '../src/module_fixtures.ngfactory';
+import {createComponent, createModule} from './util';
 
 describe('AppModule', () => {
   it('should support providers', () => {
-    var moduleRef = SomeModuleNgFactory.create();
+    var moduleRef = createModule(SomeModuleNgFactory);
     expect(moduleRef.instance instanceof SomeModule).toBe(true);
     expect(moduleRef.injector.get(SomeModule) instanceof SomeModule).toBe(true);
     expect(moduleRef.injector.get(SomeService) instanceof SomeService).toBe(true);
   });
 
   it('should support precompile components', () => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var moduleRef = SomeModuleNgFactory.create(appInjector);
-    var cf = moduleRef.injector.get(ComponentFactoryResolver).resolveComponentFactory(SomeComp);
+    var moduleRef = createModule(SomeModuleNgFactory);
+    var cf = moduleRef.componentFactoryResolver.resolveComponentFactory(SomeComp);
     expect(cf.componentType).toBe(SomeComp);
-    var comp = cf.create(moduleRef.injector);
+    var compRef = cf.create(moduleRef.injector);
+    expect(compRef.instance instanceof SomeComp).toBe(true);
   });
 
   it('should support module directives and pipes', () => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var moduleRef = SomeModuleNgFactory.create(appInjector);
-    var cf = moduleRef.injector.get(ComponentFactoryResolver).resolveComponentFactory(SomeComp);
-    var comp = cf.create(moduleRef.injector);
-    var debugElement = <DebugElement>getDebugNode(comp.location.nativeElement);
+    var compFixture = createComponent(SomeComp, SomeModuleNgFactory);
+    var debugElement = compFixture.debugElement;
 
     // NgIf should work, is being used as module directive
     expect(debugElement.children.length).toBe(1);
-    comp.changeDetectorRef.detectChanges();
+    compFixture.detectChanges();
     expect(debugElement.children.length).toBe(2);
     expect(debugElement.children[0].properties['title']).toBe('hello');
   });
 
   it('should support module directives and pipes on nested components', () => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var moduleRef = SomeModuleUsingParentCompNgFactory.create(appInjector);
-    var cf = moduleRef.injector.get(ComponentFactoryResolver).resolveComponentFactory(ParentComp);
-    var comp = cf.create(moduleRef.injector);
-    var debugElement = <DebugElement>getDebugNode(comp.location.nativeElement);
+    var compFixture = createComponent(ParentComp, SomeModuleUsingParentCompNgFactory);
+    var debugElement = compFixture.debugElement;
 
     debugElement = debugElement.children[0];
     // NgIf should work, is being used as module directive
     expect(debugElement.children.length).toBe(1);
-    comp.changeDetectorRef.detectChanges();
+    compFixture.detectChanges();
     expect(debugElement.children.length).toBe(2);
     expect(debugElement.children[0].properties['title']).toBe('hello');
   });
 
   it('should support child moduless', () => {
-    var moduleRef = SomeModuleNgFactory.create();
+    var moduleRef = createModule(SomeModuleNgFactory);
     expect(moduleRef.instance instanceof SomeModule).toBe(true);
     expect(moduleRef.injector.get(NestedModule) instanceof NestedModule).toBe(true);
     expect(moduleRef.injector.get(NestedService) instanceof NestedService).toBe(true);

modules/@angular/compiler-cli/integrationtest/test/basic_spec.ts

@@ -5,24 +5,13 @@
  * 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
  */
-
-// Only needed to satisfy the check in core/src/util/decorators.ts
-// TODO(alexeagle): maybe remove that check?
-require('reflect-metadata');
-
-require('zone.js/dist/zone-node.js');
-require('zone.js/dist/long-stack-trace-zone.js');
-
+import './init';
 import * as fs from 'fs';
 import * as path from 'path';
-import {BasicNgFactory} from '../src/basic.ngfactory';
-import {MyComp} from '../src/a/multiple_components';
-import {ReflectiveInjector, DebugElement, getDebugNode, lockRunMode} from '@angular/core';
-import {BROWSER_APP_PROVIDERS} from '@angular/platform-browser';
-import {serverPlatform} from '@angular/platform-server';
 
-// Need to lock the mode explicitely as this test is not using Angular's testing framework.
-lockRunMode();
+import {MultipleComponentsMyComp} from '../src/a/multiple_components';
+import {BasicComp} from '../src/basic';
+import {createComponent} from './util';
 
 describe('template codegen output', () => {
   const outDir = 'src';
@@ -48,35 +37,29 @@ describe('template codegen output', () => {
   });
 
   it('should be able to create the basic component', () => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var comp = BasicNgFactory.create(appInjector);
-    expect(comp.instance).toBeTruthy();
+    var compFixture = createComponent(BasicComp);
+    expect(compFixture.componentInstance).toBeTruthy();
   });
 
   it('should support ngIf', () => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var comp = BasicNgFactory.create(appInjector);
-    var debugElement = <DebugElement>getDebugNode(comp.location.nativeElement);
+    var compFixture = createComponent(BasicComp);
+    var debugElement = compFixture.debugElement;
     expect(debugElement.children.length).toBe(2);
 
-    comp.instance.ctxBool = true;
-    comp.changeDetectorRef.detectChanges();
+    compFixture.componentInstance.ctxBool = true;
+    compFixture.detectChanges();
     expect(debugElement.children.length).toBe(3);
-    expect(debugElement.children[2].injector.get(MyComp)).toBeTruthy();
+    expect(debugElement.children[2].injector.get(MultipleComponentsMyComp)).toBeTruthy();
   });
 
   it('should support ngFor', () => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var comp = BasicNgFactory.create(appInjector);
-    var debugElement = <DebugElement>getDebugNode(comp.location.nativeElement);
+    var compFixture = createComponent(BasicComp);
+    var debugElement = compFixture.debugElement;
     expect(debugElement.children.length).toBe(2);
 
     // test NgFor
-    comp.instance.ctxArr = [1, 2];
-    comp.changeDetectorRef.detectChanges();
+    compFixture.componentInstance.ctxArr = [1, 2];
+    compFixture.detectChanges();
     expect(debugElement.children.length).toBe(4);
     expect(debugElement.children[2].attributes['value']).toBe('1');
     expect(debugElement.children[3].attributes['value']).toBe('2');

modules/@angular/compiler-cli/integrationtest/test/i18n_spec.ts

@@ -6,11 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-// Only needed to satisfy the check in core/src/util/decorators.ts
-// TODO(alexeagle): maybe remove that check?
-require('reflect-metadata');
-require('zone.js/dist/zone-node.js');
-require('zone.js/dist/long-stack-trace-zone.js');
+import './init';
 let serializer = require('@angular/compiler/src/i18n/xmb_serializer.js');
 
 import * as fs from 'fs';

modules/@angular/compiler-cli/integrationtest/test/init.ts

@@ -0,0 +1,18 @@
+/**
+ * @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
+ */
+
+// Only needed to satisfy the check in core/src/util/decorators.ts
+// TODO(alexeagle): maybe remove that check?
+require('reflect-metadata');
+
+require('zone.js/dist/zone-node.js');
+require('zone.js/dist/long-stack-trace-zone.js');
+
+import {lockRunMode} from '@angular/core';
+// Need to lock the mode explicitely as this test is not using Angular's testing framework.
+lockRunMode();

modules/@angular/compiler-cli/integrationtest/test/precompile_spec.ts

@@ -6,22 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {DebugElement, ReflectiveInjector, getDebugNode, lockRunMode} from '@angular/core';
-import {BROWSER_APP_PROVIDERS, By} from '@angular/platform-browser';
-import {serverPlatform} from '@angular/platform-server';
-
-import {SomeComp} from '../src/precompile';
-import {CompWithPrecompileNgFactory} from '../src/precompile.ngfactory';
-
-// Need to lock the mode explicitely as this test is not using Angular's testing framework.
-lockRunMode();
+import './init';
+import {BasicComp} from '../src/basic';
+import {CompWithPrecompile} from '../src/precompile';
+import {createComponent} from './util';
 
 describe('content projection', () => {
   it('should support basic content projection', () => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var compWithPrecompile = CompWithPrecompileNgFactory.create(appInjector).instance;
-    var cf = compWithPrecompile.cfr.resolveComponentFactory(SomeComp);
-    expect(cf.componentType).toBe(SomeComp);
+    var compFixture = createComponent(CompWithPrecompile);
+    var cf = compFixture.componentInstance.cfr.resolveComponentFactory(BasicComp);
+    expect(cf.componentType).toBe(BasicComp);
   });
 });

modules/@angular/compiler-cli/integrationtest/test/projection_spec.ts

@@ -6,24 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {DebugElement, ReflectiveInjector, getDebugNode, lockRunMode} from '@angular/core';
-import {BROWSER_APP_PROVIDERS, By} from '@angular/platform-browser';
-import {serverPlatform} from '@angular/platform-server';
-
-import {CompWithProjection} from '../src/projection';
-import {MainCompNgFactory} from '../src/projection.ngfactory';
-
-// Need to lock the mode explicitely as this test is not using Angular's testing framework.
-lockRunMode();
+import './init';
+import {By} from '@angular/platform-browser';
+import {CompWithNgContent, ProjectingComp} from '../src/projection';
+import {createComponent} from './util';
 
 describe('content projection', () => {
   it('should support basic content projection', () => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var mainComp = MainCompNgFactory.create(appInjector);
+    var mainCompFixture = createComponent(ProjectingComp);
 
-    var debugElement = <DebugElement>getDebugNode(mainComp.location.nativeElement);
-    var compWithProjection = debugElement.query(By.directive(CompWithProjection));
+    var debugElement = mainCompFixture.debugElement;
+    var compWithProjection = debugElement.query(By.directive(CompWithNgContent));
     expect(compWithProjection.children.length).toBe(1);
     expect(compWithProjection.children[0].attributes['greeting']).toEqual('Hello world!');
   });

modules/@angular/compiler-cli/integrationtest/test/query_spec.ts

@@ -6,37 +6,30 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {DebugElement, QueryList, ReflectiveInjector, getDebugNode, lockRunMode} from '@angular/core';
-import {BROWSER_APP_PROVIDERS, By} from '@angular/platform-browser';
-import {serverPlatform} from '@angular/platform-server';
-
+import './init';
+import {DebugElement, QueryList} from '@angular/core';
+import {By} from '@angular/platform-browser';
 import {CompForChildQuery, CompWithChildQuery} from '../src/queries';
-import {CompWithChildQueryNgFactory} from '../src/queries.ngfactory';
+import {createComponent} from './util';
 
 describe('child queries', () => {
   it('should support compiling child queries', () => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var childQueryComp = CompWithChildQueryNgFactory.create(appInjector);
-
-    var debugElement = <DebugElement>getDebugNode(childQueryComp.location.nativeElement);
+    var childQueryCompFixture = createComponent(CompWithChildQuery);
+    var debugElement = childQueryCompFixture.debugElement;
     var compWithChildren = debugElement.query(By.directive(CompWithChildQuery));
-    expect(childQueryComp.instance.child).toBeDefined();
-    expect(childQueryComp.instance.child instanceof CompForChildQuery).toBe(true);
+    expect(childQueryCompFixture.componentInstance.child).toBeDefined();
+    expect(childQueryCompFixture.componentInstance.child instanceof CompForChildQuery).toBe(true);
 
   });
 
   it('should support compiling children queries', () => {
-    const appInjector =
-        ReflectiveInjector.resolveAndCreate(BROWSER_APP_PROVIDERS, serverPlatform().injector);
-    var childQueryComp = CompWithChildQueryNgFactory.create(appInjector);
-
-    var debugElement = <DebugElement>getDebugNode(childQueryComp.location.nativeElement);
+    var childQueryCompFixture = createComponent(CompWithChildQuery);
+    var debugElement = childQueryCompFixture.debugElement;
     var compWithChildren = debugElement.query(By.directive(CompWithChildQuery));
 
-    childQueryComp.changeDetectorRef.detectChanges();
+    childQueryCompFixture.detectChanges();
 
-    expect(childQueryComp.instance.children).toBeDefined();
-    expect(childQueryComp.instance.children instanceof QueryList).toBe(true);
+    expect(childQueryCompFixture.componentInstance.children).toBeDefined();
+    expect(childQueryCompFixture.componentInstance.children instanceof QueryList).toBe(true);
   });
 });

modules/@angular/compiler-cli/integrationtest/test/util.ts

@@ -0,0 +1,29 @@
+/**
+ * @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 {AppModuleFactory, AppModuleRef} from '@angular/core';
+import {ComponentFixture} from '@angular/core/testing';
+import {serverPlatform} from '@angular/platform-server';
+
+import {MainModuleNgFactory} from '../src/module.ngfactory';
+
+export function createModule<M>(factory: AppModuleFactory<M>): AppModuleRef<M> {
+  return factory.create(serverPlatform().injector);
+}
+
+export function createComponent<C>(
+    comp: {new (...args: any[]): C},
+    moduleFactory: AppModuleFactory<any> = null): ComponentFixture<C> {
+  if (!moduleFactory) {
+    moduleFactory = MainModuleNgFactory;
+  }
+  const moduleRef = createModule(moduleFactory);
+  const compRef =
+      moduleRef.componentFactoryResolver.resolveComponentFactory(comp).create(moduleRef.injector);
+  return new ComponentFixture(compRef, null, null);
+}