refactor(core): remove deprecated 'bootstrap' (#10831)

modules/@angular/common/src/directives/ng_switch.ts

@@ -77,8 +77,6 @@ export class SwitchView {
  *     this.value = this.value === 'init' ? 0 : this.value + 1;
  *   }
  * }
- *
- * bootstrap(App).catch(err => console.error(err));
  * ```
  *
  * @experimental

modules/@angular/common/src/location/hash_location_strategy.ts

@@ -28,32 +28,16 @@ import {PlatformLocation, UrlChangeListener} from './platform_location';
  * ### Example
  *
  * ```
- * import {Component, provide} from '@angular/core';
+ * import {Component, NgModule} from '@angular/core';
  * import {
- *   Location,
  *   LocationStrategy,
  *   HashLocationStrategy
  * } from '@angular/common';
- * import {
- *   ROUTER_DIRECTIVES,
- *   ROUTER_PROVIDERS,
- *   RouteConfig
- * } from '@angular/router';
  *
- * @Component({directives: [ROUTER_DIRECTIVES]})
+ * @NgModule({
- * @RouteConfig([
+ *   providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
- *  {...},
+ * })
- * ])
+ * class AppModule {}
- * class AppCmp {
- *   constructor(location: Location) {
- *     location.go('/foo');
- *   }
- * }
- *
- * bootstrap(AppCmp, [
- *   ROUTER_PROVIDERS,
- *   {provide: LocationStrategy, useClass: HashLocationStrategy}
- * ]);
  * ```
  *
  * @stable

modules/@angular/common/src/location/location.ts

@@ -32,23 +32,13 @@ import {LocationStrategy} from './location_strategy';
  * ```
  * import {Component} from '@angular/core';
  * import {Location} from '@angular/common';
- * import {
- *   ROUTER_DIRECTIVES,
- *   ROUTER_PROVIDERS,
- *   RouteConfig
- * } from '@angular/router';
  *
- * @Component({directives: [ROUTER_DIRECTIVES]})
+ * @Component({selector: 'app-component'})
- * @RouteConfig([
- *  {...},
- * ])
  * class AppCmp {
  *   constructor(location: Location) {
  *     location.go('/foo');
  *   }
  * }
- *
- * bootstrap(AppCmp, [ROUTER_PROVIDERS]);
  * ```
  *
  * @stable

modules/@angular/common/src/location/location_strategy.ts

@@ -49,24 +49,15 @@ export abstract class LocationStrategy {
  *
  * ### Example
  *
- * ```
+ * import {Component, NgModule} from '@angular/core';
- * import {Component} from '@angular/core';
- * import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from '@angular/router';
  * import {APP_BASE_HREF} from '@angular/common';
  *
- * @Component({directives: [ROUTER_DIRECTIVES]})
+ * @NgModule({
- * @RouteConfig([
+ *   providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
- *  {...},
+ * })
- * ])
+ * class AppModule {}
- * class AppCmp {
- *   // ...
- * }
- *
- * bootstrap(AppCmp, [
- *   ROUTER_PROVIDERS,
- *   {provide: APP_BASE_HREF, useValue: '/my/app'}
- * ]);
  * ```
+ *
  * @stable
  */
 export const APP_BASE_HREF: OpaqueToken = new OpaqueToken('appBaseHref');

modules/@angular/compiler/src/compiler.ts

@@ -110,7 +110,7 @@ export function analyzeAppProvidersForDeprecatedConfiguration(appProviders: any[
     useDebug = compilerConfig.genDebugInfo;
     defaultEncapsulation = compilerConfig.defaultEncapsulation;
     deprecationMessages.push(
-        `Passing CompilerConfig as a regular provider is deprecated. Use the "compilerOptions" parameter of "bootstrap()" or use a custom "CompilerFactory" platform provider instead.`);
+        `Passing CompilerConfig as a regular provider is deprecated. Use "compilerOptions" use a custom "CompilerFactory" platform provider instead.`);
   }
   const xhr = tempInj.get(XHR, null);
   if (xhr) {

modules/@angular/core/src/change_detection/change_detector_ref.ts

@@ -45,8 +45,6 @@ export abstract class ChangeDetectorRef {
    * })
    * class App {
    * }
-   *
-   * bootstrap(App);
    * ```
    */
   abstract markForCheck(): void;
@@ -104,8 +102,6 @@ export abstract class ChangeDetectorRef {
    * })
    * class App {
    * }
-   *
-   * bootstrap(App);
    * ```
    */
   abstract detach(): void;
@@ -195,8 +191,6 @@ export abstract class ChangeDetectorRef {
    * class App {
    *   live = true;
    * }
-   *
-   * bootstrap(App);
    * ```
    */
   abstract reattach(): void;

modules/@angular/core/src/di/metadata.ts

@@ -237,8 +237,6 @@ export class SkipSelfMetadata {
  * })
  * class App {
  * }
- *
- * bootstrap(App);
  *```
  * @stable
  */

modules/@angular/core/src/metadata.ts

@@ -981,8 +981,6 @@ export var Pipe: PipeMetadataFactory = <PipeMetadataFactory>makeDecorator(PipeMe
  *   directives: [BankAccount]
  * })
  * class App {}
- *
- * bootstrap(App);
  * ```
  * @stable
  * @Annotation
@@ -1028,7 +1026,6 @@ export var Input: InputMetadataFactory = makePropDecorator(InputMetadata);
  *   everySecond() { console.log('second'); }
  *   everyFiveSeconds() { console.log('five seconds'); }
  * }
- * bootstrap(App);
  * ```
  * @stable
  * @Annotation
@@ -1067,8 +1064,6 @@ export var Output: OutputMetadataFactory = makePropDecorator(OutputMetadata);
  * class App {
  *   prop;
  * }
- *
- * bootstrap(App);
  * ```
  * @stable
  * @Annotation
@@ -1106,8 +1101,6 @@ export var HostBinding: HostBindingMetadataFactory = makePropDecorator(HostBindi
  *   directives: [CountClicks]
  * })
  * class App {}
- *
- * bootstrap(App);
  * ```
  * @stable
  * @Annotation

modules/@angular/core/src/metadata/directives.ts

@@ -485,8 +485,6 @@ export class DirectiveMetadata extends InjectableMetadata implements DirectiveMe
    *   directives: [BankAccount]
    * })
    * class App {}
-   *
-   * bootstrap(App);
    * ```
    *
    */
@@ -534,7 +532,6 @@ export class DirectiveMetadata extends InjectableMetadata implements DirectiveMe
    *   everySecond() { console.log('second'); }
    *   everyFiveSeconds() { console.log('five seconds'); }
    * }
-   * bootstrap(App);
    * ```
    *
    */
@@ -585,8 +582,6 @@ export class DirectiveMetadata extends InjectableMetadata implements DirectiveMe
    *   directives: [CountClicks]
    * })
    * class App {}
-   *
-   * bootstrap(App);
    * ```
    *
    * ## Host Property Bindings
@@ -623,8 +618,6 @@ export class DirectiveMetadata extends InjectableMetadata implements DirectiveMe
    * class App {
    *   prop;
    * }
-   *
-   * bootstrap(App);
    * ```
    *
    * ## Attributes
@@ -1103,8 +1096,6 @@ export class PipeMetadata extends InjectableMetadata implements PipeMetadataType
  *   directives: [BankAccount]
  * })
  * class App {}
- *
- * bootstrap(App);
  * ```
  * @stable
  */
@@ -1154,7 +1145,6 @@ export class InputMetadata {
  *   everySecond() { console.log('second'); }
  *   everyFiveSeconds() { console.log('five seconds'); }
  * }
- * bootstrap(App);
  * ```
  * @stable
  */
@@ -1193,8 +1183,6 @@ export class OutputMetadata {
  * class App {
  *   prop;
  * }
- *
- * bootstrap(App);
  * ```
  * @stable
  */
@@ -1232,8 +1220,6 @@ export class HostBindingMetadata {
  *   directives: [CountClicks]
  * })
  * class App {}
- *
- * bootstrap(App);
  * ```
  * @stable
  */

modules/@angular/core/src/metadata/lifecycle_hooks.ts

@@ -81,8 +81,6 @@ export var LIFECYCLE_HOOKS_VALUES = [
  * export class App {
  *   value = 0;
  * }
- *
- * bootstrap(App).catch(err => console.error(err));
  * ```
  * @stable
  */
@@ -125,8 +123,6 @@ export abstract class OnChanges { abstract ngOnChanges(changes: SimpleChanges):
  * export class App {
  *   hasChild = true;
  * }
- *
- * bootstrap(App).catch(err => console.error(err));
  * ```
  * @stable
  */
@@ -236,8 +232,6 @@ export abstract class DoCheck { abstract ngDoCheck(): void; }
  * export class App {
  *   hasChild = true;
  * }
- *
- * bootstrap(App).catch(err => console.error(err));
  * ```
  *
  *
@@ -340,8 +334,6 @@ export abstract class OnDestroy { abstract ngOnDestroy(): void; }
  * })
  * export class App {
  * }
- *
- * bootstrap(App).catch(err => console.error(err));
  * ```
  * @stable
  */
@@ -389,8 +381,6 @@ export abstract class AfterContentInit { abstract ngAfterContentInit(): void; }
  * export class App {
  *   hasContent = true;
  * }
- *
- * bootstrap(App).catch(err => console.error(err));
  * ```
  * @stable
  */
@@ -437,8 +427,6 @@ export abstract class AfterContentChecked { abstract ngAfterContentChecked(): vo
  * })
  * export class App {
  * }
- *
- * bootstrap(App).catch(err => console.error(err));
  * ```
  * @stable
  */
@@ -488,8 +476,6 @@ export abstract class AfterViewInit { abstract ngAfterViewInit(): void; }
  * })
  * export class App {
  * }
- *
- * bootstrap(App).catch(err => console.error(err));
  * ```
  * @stable
  */

modules/@angular/examples/compiler/ts/url_resolver/url_resolver.ts

@@ -7,7 +7,9 @@
  */
 
 import {UrlResolver} from '@angular/compiler';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 var MyApp: any;
 
@@ -22,5 +24,15 @@ class MyUrlResolver extends UrlResolver {
   }
 }
 
-bootstrap(MyApp, [{provide: UrlResolver, useClass: MyUrlResolver}]);
+@NgModule({
+  imports: [BrowserModule],
+  providers: [{provide: UrlResolver, useClass: MyUrlResolver}],
+  bootstrap: [MyApp]
+})
+class AppModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
+}
 // #enddocregion

modules/@angular/examples/core/pipes/ts/async_pipe/async_pipe_example.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {Observable, Subscriber} from 'rxjs/Rx';
 
 // #docregion AsyncPipePromise
@@ -62,6 +63,10 @@ class Task {
 export class AppCmp {
 }
 
-export function main() {
+@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
-  bootstrap(AppCmp);
+class AppModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
 }

modules/@angular/examples/core/pipes/ts/date_pipe/date_pipe_example.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion DatePipe
 @Component({
@@ -34,6 +35,10 @@ export class DatePipeExample {
 export class AppCmp {
 }
 
-export function main() {
+@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
-  bootstrap(AppCmp);
+class AppModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
 }

modules/@angular/examples/core/pipes/ts/json_pipe/json_pipe_example.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion JsonPipe
 @Component({
@@ -35,6 +36,10 @@ export class JsonPipeExample {
 export class AppCmp {
 }
 
-export function main() {
+@NgModule({imports: [BrowserModule], bootstrap: [AppCmp], declarations: [AppCmp, JsonPipeExample]})
-  bootstrap(AppCmp);
+class AppModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
 }

modules/@angular/examples/core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion LowerUpperPipe
 @Component({
@@ -35,6 +36,10 @@ export class LowerUpperPipeExample {
 export class AppCmp {
 }
 
-export function main() {
+@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
-  bootstrap(AppCmp);
+class AppModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
 }

modules/@angular/examples/core/pipes/ts/number_pipe/number_pipe_example.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion NumberPipe
 @Component({
@@ -69,6 +70,10 @@ export class CurrencyPipeExample {
 export class AppCmp {
 }
 
-export function main() {
+@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
-  bootstrap(AppCmp);
+class AppModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
 }

modules/@angular/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion SlicePipe_string
 @Component({
@@ -50,6 +51,10 @@ export class SlicePipeListExample {
 export class AppCmp {
 }
 
-export function main() {
+@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
-  bootstrap(AppCmp);
+class AppModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
 }

modules/@angular/examples/core/ts/bootstrap/bootstrap.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion bootstrap
 @Component({selector: 'my-app', template: 'Hello {{ name }}!'})
@@ -15,7 +16,12 @@ class MyApp {
   name: string = 'World';
 }
 
-function main() {
+@NgModule({imports: [BrowserModule], bootstrap: [MyApp]})
-  return bootstrap(MyApp);
+class AppModule {
 }
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(AppModule);
+}
+
 // #enddocregion

modules/@angular/examples/core/ts/prod_mode/prod_mode_example.ts

@@ -7,10 +7,14 @@
  */
 
 // #docregion enableProdMode
-import {enableProdMode} from '@angular/core';
+import {NgModule, enableProdMode} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {MyComponent} from './my_component';
 
 enableProdMode();
-bootstrap(MyComponent);
+@NgModule({imports: [BrowserModule], bootstrap: [MyComponent]})
+class AppModule {
+}
+platformBrowserDynamic().bootstrapModule(AppModule);
 // #enddocregion

modules/@angular/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts

@@ -6,13 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 @Component({selector: 'my-component'})
 class MyAppComponent {
 }
 
 // #docregion providers
-bootstrap(MyAppComponent);
+@NgModule({imports: [BrowserModule], bootstrap: [MyAppComponent]})
+class AppModule {
+}
+platformBrowserDynamic().bootstrapModule(AppModule);
 // #enddocregion

modules/@angular/facade/src/exception_handler.ts

@@ -35,8 +35,10 @@ class _ArrayLogger {
  *   }
  * }
  *
- * bootstrap(MyApp, [{provide: ExceptionHandler, useClass: MyExceptionHandler}])
+ * @NgModule({
- *
+ *   providers: [{provide: ExceptionHandler, useClass: MyExceptionHandler}]
+ * })
+ * class MyModule {}
  * ```
  * @stable
  */

modules/@angular/http/http.ts

@@ -79,9 +79,6 @@ export {QueryEncoder, URLSearchParams} from './src/url_search_params';
  *     this.active = !this.active;
  *   }
  * }
- *
- * bootstrap(App)
- *   .catch(err => console.error(err));
  * ```
  *
  * The primary public API included in `HTTP_PROVIDERS` is the {@link Http} class.
@@ -112,8 +109,11 @@ export {QueryEncoder, URLSearchParams} from './src/url_search_params';
  *   search: string = 'coreTeam=true';
  * }
  *
- * bootstrap(App, [HTTP_PROVIDERS, {provide: RequestOptions, useClass: MyOptions}])
+ * @NgModule({
- *   .catch(err => console.error(err));
+ *   imports: [HttpModule],
+ *   providers: [{provide: RequestOptions, useClass: MyOptions}]
+ * })
+ * class MyModule {}
  * ```
  *
  * Likewise, to use a mock backend for unit tests, the {@link XHRBackend}

modules/@angular/platform-browser-dynamic/index.ts

@@ -28,117 +28,6 @@ export const CACHED_TEMPLATE_PROVIDER: Provider[] = [{provide: XHR, useClass: Ca
 export const platformBrowserDynamic = createPlatformFactory(
     platformCoreDynamic, 'browserDynamic', INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS);
 
-/**
- * Bootstrapping for Angular applications.
- *
- * You instantiate an Angular application by explicitly specifying a component to use
- * as the root component for your application via the `bootstrap()` method.
- *
- * ## Simple Example
- *
- * Assuming this `index.html`:
- *
- * ```html
- * <html>
- *   <!-- load Angular script tags here. -->
- *   <body>
- *     <my-app>loading...</my-app>
- *   </body>
- * </html>
- * ```
- *
- * An application is bootstrapped inside an existing browser DOM, typically `index.html`.
- * Unlike Angular 1, Angular 2 does not compile/process providers in `index.html`. This is
- * mainly for security reasons, as well as architectural changes in Angular 2. This means
- * that `index.html` can safely be processed using server-side technologies such as
- * providers. Bindings can thus use double-curly `{{ syntax }}` without collision from
- * Angular 2 component double-curly `{{ syntax }}`.
- *
- * We can use this script code:
- *
- * {@example core/ts/bootstrap/bootstrap.ts region='bootstrap'}
- *
- * When the app developer invokes `bootstrap()` with the root component `MyApp` as its
- * argument, Angular performs the following tasks:
- *
- *  1. It uses the component's `selector` property to locate the DOM element which needs
- *     to be upgraded into the angular component.
- *  2. It creates a new child injector (from the platform injector). Optionally, you can
- *     also override the injector configuration for an app by invoking `bootstrap` with the
- *     `componentInjectableBindings` argument.
- *  3. It creates a new `Zone` and connects it to the angular application's change detection
- *     domain instance.
- *  4. It creates an emulated or shadow DOM on the selected component's host element and loads the
- *     template into it.
- *  5. It instantiates the specified component.
- *  6. Finally, Angular performs change detection to apply the initial data providers for the
- *     application.
- *
- *
- * ## Bootstrapping Multiple Applications
- *
- * When working within a browser window, there are many singleton resources: cookies, title,
- * location, and others. Angular services that represent these resources must likewise be
- * shared across all Angular applications that occupy the same browser window. For this
- * reason, Angular creates exactly one global platform object which stores all shared
- * services, and each angular application injector has the platform injector as its parent.
- *
- * Each application has its own private injector as well. When there are multiple
- * applications on a page, Angular treats each application injector's services as private
- * to that application.
- *
- * ## API (version 1)
- *
- * - `appComponentType`: The root component which should act as the application. This is
- *   a reference to a `Type` which is annotated with `@Component(...)`.
- * - `customProviders`: An additional set of providers that can be added to the
- *   app injector to override default injection behavior.
- *
- * ## API (version 2)
- * - `appComponentType`: The root component which should act as the application. This is
- *   a reference to a `Type` which is annotated with `@Component(...)`.
- * - `providers`, `declarations`, `imports`, `entryComponents`: Defines the properties
- *   of the dynamically created module that is used to bootstrap the module.
- * - to configure the compiler, use the `compilerOptions` parameter.
- *
- * Returns a `Promise` of {@link ComponentRef}.
- *
- * @deprecated This api cannot be used with the offline compiler. Use
- * `PlatformRef.boostrapModule()` instead.
- */
-// Note: We are using typescript overloads here to have 2 function signatures!
-export function bootstrap<C>(
-    appComponentType: Type<C>, customProviders?: Provider[]): Promise<ComponentRef<C>> {
-  let compilerOptions: CompilerOptions;
-  let declarations: any[] = [];
-  let entryComponents: any[] = [];
-  let deprecationMessages: string[] = [];
-  const deprecatedConfiguration = analyzeAppProvidersForDeprecatedConfiguration(customProviders);
-  declarations = deprecatedConfiguration.moduleDeclarations.concat(declarations);
-  compilerOptions = deprecatedConfiguration.compilerOptions;
-  deprecationMessages = deprecatedConfiguration.deprecationMessages;
-
-  @NgModule({
-    providers: customProviders,
-    declarations: declarations.concat([appComponentType]),
-    imports: [BrowserModule],
-    entryComponents: entryComponents,
-    bootstrap: [appComponentType],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
-  })
-  class DynamicModule {
-  }
-
-  return platformBrowserDynamic()
-      .bootstrapModule(DynamicModule, compilerOptions)
-      .then((moduleRef) => {
-        const console = moduleRef.injector.get(Console);
-        deprecationMessages.forEach((msg) => console.warn(msg));
-        const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
-        return appRef.components[0];
-      });
-}
-
 /**
  * Bootstraps the worker ui.
  *

modules/@angular/platform-browser/test/browser/bootstrap_spec.ts

@@ -7,17 +7,18 @@
  */
 
 import {XHR} from '@angular/compiler';
-import {APP_INITIALIZER, Component, Directive, ExceptionHandler, Inject, Input, NgModule, OnDestroy, PLATFORM_INITIALIZER, Pipe, createPlatformFactory} from '@angular/core';
+import {APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, Component, Directive, ExceptionHandler, Inject, Input, NgModule, OnDestroy, PLATFORM_INITIALIZER, Pipe, createPlatformFactory} from '@angular/core';
 import {ApplicationRef, destroyPlatform} from '@angular/core/src/application_ref';
 import {Console} from '@angular/core/src/console';
 import {ComponentRef} from '@angular/core/src/linker/component_factory';
 import {Testability, TestabilityRegistry} from '@angular/core/src/testability/testability';
 import {AsyncTestCompleter, Log, afterEach, beforeEach, beforeEachProviders, ddescribe, describe, iit, inject, it} from '@angular/core/testing/testing_internal';
 import {BrowserModule} from '@angular/platform-browser';
-import {bootstrap, platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {DOCUMENT} from '@angular/platform-browser/src/dom/dom_tokens';
 import {expect} from '@angular/platform-browser/testing/matchers';
+
 import {stringify} from '../../src/facade/lang';
 
 @Component({selector: 'hello-app', template: '{{greeting}} world!'})
@@ -110,6 +111,21 @@ class DummyConsole implements Console {
   warn(message: string) { this.warnings.push(message); }
 }
 
+
+class TestModule {}
+function bootstrap(cmpType: any, providers: any = []): Promise<any> {
+  @NgModule({
+    imports: [BrowserModule],
+    declarations: [cmpType],
+    bootstrap: [cmpType],
+    providers: providers,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  })
+  class TestModule {
+  }
+  return platformBrowserDynamic().bootstrapModule(TestModule);
+}
+
 export function main() {
   var fakeDoc: any /** TODO #9100 */, el: any /** TODO #9100 */, el2: any /** TODO #9100 */,
       testProviders: any /** TODO #9100 */, lightDom: any /** TODO #9100 */;
@@ -147,10 +163,9 @@ export function main() {
        inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
          var logger = new _ArrayLogger();
          var exceptionHandler = new ExceptionHandler(logger, false);
-
+         bootstrap(HelloRootCmp, [
-         var refPromise =
+           {provide: ExceptionHandler, useValue: exceptionHandler}
-             bootstrap(HelloRootCmp, [{provide: ExceptionHandler, useValue: exceptionHandler}]);
+         ]).then(null, (reason) => {
-         refPromise.then(null, (reason) => {
            expect(reason.message).toContain('The selector "hello-app" did not match any elements');
            async.done();
            return null;
@@ -236,7 +251,7 @@ export function main() {
              HelloRootCmp3, [testProviders, {provide: 'appBinding', useValue: 'BoundValue'}]);
 
          refPromise.then((ref) => {
-           expect(ref.instance.appBinding).toEqual('BoundValue');
+           expect(ref.injector.get('appBinding')).toEqual('BoundValue');
            async.done();
          });
        }));
@@ -246,7 +261,8 @@ export function main() {
          var refPromise = bootstrap(HelloRootCmp4, testProviders);
 
          refPromise.then((ref) => {
-           expect(ref.instance.appRef).toBe(ref.injector.get(ApplicationRef));
+           const appRef = ref.injector.get(ApplicationRef);
+           expect(appRef).toBeDefined();
            async.done();
          });
        }));
@@ -294,22 +310,6 @@ export function main() {
          });
        }));
 
-    // Note: This will soon be deprecated as bootstrap creates a separate injector for the compiler,
-    // i.e. such providers needs to go into that injecotr (when calling `browserCompiler`);
-    it('should still allow to provide a custom xhr via the regular providers',
-       inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
-         let spyXhr: XHR = {get: (url: string) => Promise.resolve('{{greeting}} world!')};
-         bootstrap(HelloUrlCmp, testProviders.concat([
-           {provide: XHR, useValue: spyXhr}
-         ])).then((compRef) => {
-           expect(el).toHaveText('hello world!');
-           expect(compilerConsole.warnings).toEqual([
-             'Passing XHR as regular provider is deprecated. Pass the provider via "compilerOptions" instead.'
-           ]);
-           async.done();
-         });
-       }));
-
     it('should allow to pass schemas', inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
          bootstrap(HelloCmpUsingCustomElement, testProviders).then((compRef) => {
            expect(el).toHaveText('hello world!');

modules/@angular/router/testing/router_testing_module.ts

@@ -68,18 +68,16 @@ function setupTestingRouter(
 @NgModule({
   exports: [RouterModule],
   providers: [
-    ROUTER_PROVIDERS,
+    ROUTER_PROVIDERS, {provide: Location, useClass: SpyLocation},
-    {provide: Location, useClass: SpyLocation},
     {provide: LocationStrategy, useClass: MockLocationStrategy},
-    {provide: NgModuleFactoryLoader, useClass: SpyNgModuleFactoryLoader},
+    {provide: NgModuleFactoryLoader, useClass: SpyNgModuleFactoryLoader}, {
-    {
       provide: Router,
       useFactory: setupTestingRouter,
       deps: [
         ComponentResolver, UrlSerializer, RouterOutletMap, Location, NgModuleFactoryLoader,
         Compiler, Injector, ROUTES
       ]
-    },
+    }
   ]
 })
 export class RouterTestingModule {

modules/benchmarks/src/costs/index.ts

@@ -4,6 +4,8 @@ import {NgIf, NgFor} from '@angular/common';
 import {ApplicationRef} from '@angular/core/src/application_ref';
 import {ListWrapper} from '@angular/facade/src/lang';
 import {getIntParameter, bindAction} from '@angular/testing/src/benchmark_util';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 var testList = null;
 
@@ -11,7 +13,7 @@ export function main() {
   var size = getIntParameter('size');
   testList = ListWrapper.createFixedSize(size);
 
-  bootstrap(AppComponent)
+  platformBrowserDynamic().bootstrapModule(AppModule)
       .then((ref) => {
         var injector = ref.injector;
         var app: AppComponent = ref.instance;
@@ -105,3 +107,12 @@ class AppComponent {
     this.testingDynamicComponents = true;
   }
 }
+
+
+
+@NgModule({
+  imports: [BrowserModule],
+  bootstrap: [AppComponent]
+})
+class AppModule {
+}

modules/benchmarks/src/naive_infinite_scroll/index.ts

@@ -1,13 +1,18 @@
-import {bootstrap} from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {
+  NgModule
+} from '@angular/core';
 
 import {App} from './app';
 
-import {bind, provide} from '@angular/core';
+@NgModule({
+  imports: [BrowserModule],
+  bootstrap: [App]
+})
+class AppModule {
+}
 
 export function main() {
-  bootstrap(App, createBindings());
+  platformBrowserDynamic().bootstrapModule(AppModule);
-}
-
-function createBindings(): any[] {
-  return [];
 }

modules/benchmarks/src/page_load/page_load.ts

@@ -1,11 +1,19 @@
-import {Component} from 'angular2/core';
+import {Component, NgModule} from 'angular2/core';
-import {bootstrap} from 'angular2/platform/browser';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 @Component({selector: 'app', template: '<h1>Page Load Time</h1>'})
 class App {
 }
 
-bootstrap(App).then(() => {
+@NgModule({
+  imports: [BrowserModule],
+  bootstrap: [App],
+})
+class AppModule {
+}
+
+platformBrowserDynamic().bootstrapModule(App).then(() => {
   (<any>window).loadTime = Date.now() - performance.timing.navigationStart;
   (<any>window).someConstant = 1234567890;
 });

modules/benchmarks/src/static_tree/tree_benchmark.ts

@@ -1,6 +1,5 @@
-import {bootstrap} from '@angular/platform-browser';
 import {NgIf} from '@angular/common';
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
 import {ApplicationRef} from '@angular/core/src/application_ref';
 import {reflector} from '@angular/core/src/reflection/reflection';
 import {ReflectionCapabilities} from '@angular/core/src/reflection/reflection_capabilities';
@@ -14,6 +13,8 @@ import {
   windowProfileEnd
 } from '@angular/testing/src/benchmark_util';
 import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
 
 function createBindings(): any[] {
   return [];
@@ -82,8 +83,16 @@ export function main() {
     appRef.tick();
   }
 
+  @NgModule({
+    imports: [BrowserModule],
+    bootstrap: [AppComponentWithStaticTree],
+    providers: createBindings()
+  })
+  class AppModule {
+  }
+
   function initNg2() {
-    bootstrap(AppComponentWithStaticTree, createBindings())
+    platformBrowserDynamic().bootstrapModule(AppModule)
         .then((ref) => {
           var injector = ref.injector;
           appRef = injector.get(ApplicationRef);

modules/benchmarks/src/tree/tree_benchmark.ts

@@ -1,5 +1,6 @@
 import {bootstrap} from '@angular/platform-browser';
 import {
+  NgModule,
   Component,
   enableProdMode
 } from '@angular/core';
@@ -17,6 +18,8 @@ import {
   windowProfileEnd
 } from '@angular/testing/src/benchmark_util';
 import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 function createProviders(): any[] {
   return [];
@@ -84,8 +87,16 @@ export function main() {
 
   function noop() {}
 
+  @NgModule({
+    imports: [BrowserModule],
+    bootstrap: [AppComponent],
+    providers: createProviders()
+  })
+  class AppModule {
+  }
+
   function initNg2() {
-    bootstrap(AppComponent, createProviders())
+    platformBrowserDynamic().bootstrapModule(AppModule)
         .then((ref) => {
           var injector = ref.injector;
           appRef = injector.get(ApplicationRef);

modules/payload_tests/hello_world/ts/systemjs/index.ts

@@ -1,5 +1,6 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
 
 @Component({
   selector: 'hello-app',
@@ -12,4 +13,10 @@ class HelloCmp {
   name = 'World';
 }
 
-bootstrap(HelloCmp);
+@NgModule({
+  bootstrap: [HelloCmp],
+  imports: [BrowserModule]
+})
+class ExampleModule {}
+
+platformBrowserDynamic().bootstrapModule(ExampleModule);

modules/payload_tests/hello_world/ts/webpack/index.ts

@@ -1,5 +1,6 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
 
 @Component({
   selector: 'hello-app',
@@ -12,4 +13,13 @@ export class HelloCmp {
   name = 'World';
 }
 
-bootstrap(HelloCmp);
+@NgModule({
+  bootstrap: [HelloCmp],
+  imports: [BrowserModule]
+})
+class ExampleModule {}
+
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
+}

modules/playground/src/animate/index.ts

@@ -5,11 +5,16 @@
  * 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 {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 import {AnimateApp} from './app/animate-app';
 
-export function main() {
+@NgModule({bootstrap: [AnimateApp], imports: [BrowserModule]})
-  bootstrap(AnimateApp);
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/async/index.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgIf} from '@angular/common';
+import {Component, NgModule} from '@angular/core';
-import {Component} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 @Component({
   selector: 'async-app',
@@ -32,8 +32,7 @@ import {bootstrap} from '@angular/platform-browser-dynamic';
       <button class='action' (click)="periodicIncrement()">Periodic Increment</button>
       <button class='cancel' *ngIf="intervalId != null" (click)="cancelPeriodicIncrement()">Cancel</button>
     </div>
-  `,
+  `
-  directives: [NgIf]
 })
 class AsyncApplication {
   val1: number = 0;
@@ -99,6 +98,10 @@ class AsyncApplication {
   };
 }
 
-export function main() {
+@NgModule({bootstrap: [AsyncApplication], imports: [BrowserModule]})
-  bootstrap(AsyncApplication);
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/gestures/index.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 @Component({selector: 'gestures-app', templateUrl: 'template.html'})
 class GesturesCmp {
@@ -24,6 +25,10 @@ class GesturesCmp {
   onRotate(event: any /** TODO #9100 */): void { this.rotateAngle = event.rotation; }
 }
 
-export function main() {
+@NgModule({bootstrap: [GesturesCmp], imports: [BrowserModule]})
-  bootstrap(GesturesCmp);
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/hello_world/index.ts

@@ -6,18 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, ElementRef, Injectable, Renderer} from '@angular/core';
+import {Component, Directive, ElementRef, Injectable, NgModule, Renderer} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 export function main() {
-  // Bootstrapping only requires specifying a root component.
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
-  // The boundary between the Angular application and the rest of the page is
-  // the shadowDom of this root component.
-  // The selector of the component passed in is used to find where to insert the
-  // application.
-  // You can use the light dom of the <hello-app> tag as temporary content (for
-  // example 'Loading...') before the application is ready.
-  bootstrap(HelloCmp);
 }
 
 // A service available to the Injector, used by the HelloCmp component.
@@ -53,12 +47,7 @@ export class RedDec {
   // Expressions in the template (like {{greeting}}) are evaluated in the
   // context of the HelloCmp class below.
   template: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
-           <button class="changeButton" (click)="changeGreeting()">change greeting</button>`,
+           <button class="changeButton" (click)="changeGreeting()">change greeting</button>`
-  // All directives used in the template need to be specified. This allows for
-  // modularity (RedDec can only be used in this template)
-  // and better tooling (the template can be invalidated if the attribute is
-  // misspelled).
-  directives: [RedDec]
 })
 export class HelloCmp {
   greeting: string;
@@ -67,3 +56,7 @@ export class HelloCmp {
 
   changeGreeting(): void { this.greeting = 'howdy'; }
 }
+
+@NgModule({bootstrap: [HelloCmp], declarations: [RedDec], imports: [BrowserModule]})
+class ExampleModule {
+}

modules/playground/src/http/index.ts

@@ -6,11 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {NgModule} from '@angular/core';
 import {HTTP_PROVIDERS} from '@angular/http';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 import {HttpCmp} from './app/http_comp';
 
-export function main() {
+@NgModule({bootstrap: [HttpCmp], providers: [HTTP_PROVIDERS], imports: [BrowserModule]})
-  bootstrap(HttpCmp, [HTTP_PROVIDERS]);
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/jsonp/index.ts

@@ -6,11 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {NgModule} from '@angular/core';
 import {JSONP_PROVIDERS} from '@angular/http';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 import {JsonpCmp} from './app/jsonp_comp';
 
-export function main() {
+@NgModule({
-  bootstrap(JsonpCmp, [JSONP_PROVIDERS]);
+  bootstrap: [JsonpCmp],
+  declarations: [JsonpCmp],
+  providers: [JSONP_PROVIDERS],
+  imports: [BrowserModule]
+})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/key_events/index.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 // TODO: remove deep import by reimplementing the event name serialization
 import {KeyEventsPlugin} from '@angular/platform-browser/src/dom/events/key_events';
 
@@ -40,6 +41,10 @@ class KeyEventsApp {
   resetShiftEnter(): void { this.shiftEnter = false; }
 }
 
-export function main() {
+@NgModule({bootstrap: [KeyEventsApp], imports: [BrowserModule]})
-  bootstrap(KeyEventsApp);
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/model_driven_forms/index.ts

@@ -6,11 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgFor, NgIf} from '@angular/common';
+import {Component, Directive, Host, NgModule} from '@angular/core';
-import {Component, Directive, Host} from '@angular/core';
 import {isPresent, print} from '@angular/core/src/facade/lang';
-import {AbstractControl, FormBuilder, FormGroup, FormGroupDirective, REACTIVE_FORM_DIRECTIVES, Validators} from '@angular/forms';
+import {AbstractControl, FormBuilder, FormGroup, FormGroupDirective, ReactiveFormsModule, Validators} from '@angular/forms';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 
 
@@ -45,8 +45,7 @@ function creditCardValidator(c: AbstractControl): {[key: string]: boolean} {
   inputs: ['controlPath: control', 'errorTypes: errors'],
   template: `
     <span *ngIf="errorMessage !== null">{{errorMessage}}</span>
-  `,
+  `
-  directives: [NgIf]
 })
 class ShowError {
   formDir: any /** TODO #9100 */;
@@ -132,8 +131,7 @@ class ShowError {
 
       <button type="submit" [disabled]="!f.form.valid">Submit</button>
     </form>
-  `,
+  `
-  directives: [REACTIVE_FORM_DIRECTIVES, NgFor, ShowError]
 })
 class ReactiveForms {
   form: any /** TODO #9100 */;
@@ -158,6 +156,14 @@ class ReactiveForms {
   }
 }
 
-export function main() {
+@NgModule({
-  bootstrap(ReactiveForms);
+  bootstrap: [ReactiveForms],
+  declarations: [ShowError],
+  imports: [BrowserModule, ReactiveFormsModule]
+})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/order_management/index.ts

@@ -6,11 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgFor, NgIf} from '@angular/common';
+import {Component, EventEmitter, Injectable, Input, NgModule, Output} from '@angular/core';
-import {Component, EventEmitter, Injectable, Input, Output} from '@angular/core';
 import {ListWrapper} from '@angular/core/src/facade/collection';
-import {FORM_DIRECTIVES} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 /**
  * You can find the Angular 1 implementation of this example here:
@@ -103,8 +103,7 @@ class DataService {
 
       <button (click)="select(order)">Select</button>
   	</div>
-  `,
+  `
-  directives: [FORM_DIRECTIVES, NgFor]
 })
 class OrderListComponent {
   orders: Order[];
@@ -137,8 +136,7 @@ class OrderListComponent {
 
       <button (click)="onDelete()">Delete</button>
     </div>
-  `,
+  `
-  directives: [FORM_DIRECTIVES]
 })
 class OrderItemComponent {
   @Input() item: OrderItem;
@@ -174,8 +172,7 @@ class OrderItemComponent {
       <button (click)="addItem()">Add Item</button>
       <order-item-cmp *ngFor="let item of order.items" [item]="item" (delete)="deleteItem(item)"></order-item-cmp>
     </div>
-  `,
+  `
-  directives: [FORM_DIRECTIVES, OrderItemComponent, NgFor, NgIf]
 })
 class OrderDetailsComponent {
   constructor(private _service: DataService) {}
@@ -193,12 +190,19 @@ class OrderDetailsComponent {
   template: `
     <order-list-cmp></order-list-cmp>
     <order-details-cmp></order-details-cmp>
-  `,
+  `
-  directives: [OrderListComponent, OrderDetailsComponent]
 })
 class OrderManagementApplication {
 }
 
-export function main() {
+@NgModule({
-  bootstrap(OrderManagementApplication);
+  bootstrap: [OrderManagementApplication],
+  declarations: [OrderListComponent, OrderDetailsComponent, OrderItemComponent],
+  imports: [BrowserModule, FormsModule]
+})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/person_management/index.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgFor, NgIf} from '@angular/common';
+import {Component, Injectable, NgModule} from '@angular/core';
-import {Component, Injectable} from '@angular/core';
+import {FormsModule} from '@angular/forms';
-import {FORM_DIRECTIVES} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 /**
  * You can find the Angular 1 implementation of this example here:
@@ -100,8 +100,7 @@ class DataService {
           </div>
       </form>
     </div>
-  `,
+  `
-  directives: [FORM_DIRECTIVES]
 })
 class FullNameComponent {
   constructor(private _service: DataService) {}
@@ -148,8 +147,7 @@ class FullNameComponent {
 				</div>
       </form>
     </div>
-  `,
+  `
-  directives: [FORM_DIRECTIVES, NgIf]
 })
 class PersonsDetailComponent {
   constructor(private _service: DataService) {}
@@ -169,8 +167,7 @@ class PersonsDetailComponent {
 
      <person-detail-cmp></person-detail-cmp>
     </div>
-  `,
+  `
-  directives: [FORM_DIRECTIVES, PersonsDetailComponent, NgFor]
 })
 class PersonsComponent {
   persons: Person[];
@@ -190,8 +187,7 @@ class PersonsComponent {
 
     <full-name-cmp *ngIf="mode == 'editName'"></full-name-cmp>
     <persons-cmp *ngIf="mode == 'personList'"></persons-cmp>
-  `,
+  `
-  directives: [FullNameComponent, PersonsComponent, NgIf]
 })
 class PersonManagementApplication {
   mode: string;
@@ -200,6 +196,14 @@ class PersonManagementApplication {
   switchToPersonList(): void { this.mode = 'personList'; }
 }
 
-export function main() {
+@NgModule({
-  bootstrap(PersonManagementApplication);
+  bootstrap: [PersonManagementApplication],
+  declarations: [FullNameComponent, PersonsComponent, PersonsDetailComponent],
+  imports: [BrowserModule, FormsModule]
+})
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/relative_assets/index.ts

@@ -6,13 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 import {MyCmp} from './app/my_cmp';
 
 export function main() {
-  bootstrap(RelativeApp);
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }
 
 @Component({
@@ -22,3 +23,7 @@ export function main() {
 })
 export class RelativeApp {
 }
+
+@NgModule({bootstrap: [RelativeApp], imports: [BrowserModule]})
+class ExampleModule {
+}

modules/playground/src/sourcemap/index.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
 import {BaseException} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 @Component({
   selector: 'error-app',
@@ -19,6 +20,10 @@ export class ErrorComponent {
   createError(): void { throw new BaseException('Sourcemap test'); }
 }
 
-export function main() {
+@NgModule({bootstrap: [ErrorComponent], imports: [BrowserModule]})
-  bootstrap(ErrorComponent);
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/svg/index.ts

@@ -6,25 +6,27 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 @Component({selector: '[svg-group]', template: `<svg:text x="20" y="20">Hello</svg:text>`})
 class SvgGroup {
 }
 
-
 @Component({
   selector: 'svg-app',
   template: `<svg>
     <g svg-group></g>
-  </svg>`,
+  </svg>`
-  directives: [SvgGroup]
 })
 class SvgApp {
 }
 
+@NgModule({bootstrap: [SvgApp], declarations: [SvgGroup], imports: [BrowserModule]})
+class ExampleModule {
+}
 
 export function main() {
-  bootstrap(SvgApp);
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/template_driven_forms/index.ts

@@ -7,10 +7,11 @@
  */
 
 import {NgFor, NgIf} from '@angular/common';
-import {Component, Directive, Host} from '@angular/core';
+import {Component, Directive, Host, NgModule} from '@angular/core';
 import {isPresent, print} from '@angular/core/src/facade/lang';
 import {FORM_DIRECTIVES, FormGroup, NG_VALIDATORS, NgControl, NgForm, Validators} from '@angular/forms';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 
 
@@ -168,7 +169,10 @@ class TemplateDrivenForms {
     print(this.model);
   }
 }
+@NgModule({bootstrap: [TemplateDrivenForms], imports: [BrowserModule]})
+class ExampleModule {
+}
 
 export function main() {
-  bootstrap(TemplateDrivenForms);
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/todo/index.ts

@@ -6,18 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgFor} from '@angular/common';
+import {Component, NgModule} from '@angular/core';
-import {Component} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 import {Store, Todo, TodoFactory} from './app/TodoStore';
 
-@Component({
+@Component({selector: 'todo-app', viewProviders: [Store, TodoFactory], templateUrl: 'todo.html'})
-  selector: 'todo-app',
-  viewProviders: [Store, TodoFactory],
-  templateUrl: 'todo.html',
-  directives: [NgFor]
-})
 class TodoApp {
   todoEdit: Todo = null;
 
@@ -56,6 +51,10 @@ class TodoApp {
   clearCompleted(): void { this.todoStore.removeBy((todo: Todo) => todo.completed); }
 }
 
-export function main() {
+@NgModule({bootstrap: [TodoApp], imports: [BrowserModule]})
-  bootstrap(TodoApp);
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/web_workers/images/single_thread.ts

@@ -6,9 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
 import {ImageDemo} from './index_common';
 
-export function main() {
+@NgModule({bootstrap: [ImageDemo], imports: [BrowserModule]})
-  bootstrap(ImageDemo);
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/playground/src/zippy_component/index.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 import {Zippy} from './app/zippy';
 
@@ -29,6 +30,10 @@ class ZippyApp {
   pushLog(log: string) { this.logs.push(log); }
 }
 
-export function main() {
+@NgModule({bootstrap: [ZippyApp], imports: [BrowserModule]})
-  bootstrap(ZippyApp);
+class ExampleModule {
+}
+
+export function main() {
+  platformBrowserDynamic().bootstrapModule(ExampleModule);
 }

modules/rollup-test/hello_world.ts

@@ -1,8 +1,23 @@
-import {Component} from '@angular/core';
+/**
-import {bootstrap} from '@angular/platform-browser';
+ * @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 {Component, NgModule} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
 
 @Component({selector: 'hello-world', template: 'hello world!!!'})
 class HelloWorldComponent {
 }
 
-bootstrap(HelloWorldComponent);
+@NgModule({
+  bootstrap: [HelloWorldComponent],
+  imports: [BrowserModule]
+})
+class ExampleModule {}
+
+platformBrowserDynamic().bootstrapModule(ExampleModule);

tools/public_api_guard/platform-browser-dynamic/index.d.ts

@@ -1,6 +1,3 @@
-/** @deprecated */
-export declare function bootstrap<C>(appComponentType: Type<C>, customProviders?: Provider[]): Promise<ComponentRef<C>>;
-
 /** @experimental */
 export declare function bootstrapWorkerUi(workerScriptUri: string, customProviders?: Provider[]): Promise<PlatformRef>;