diff --git a/modules/@angular/common/src/directives/ng_switch.ts b/modules/@angular/common/src/directives/ng_switch.ts index c193206539..94d12a8c0a 100644 --- a/modules/@angular/common/src/directives/ng_switch.ts +++ b/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 diff --git a/modules/@angular/common/src/location/hash_location_strategy.ts b/modules/@angular/common/src/location/hash_location_strategy.ts index 432c44453a..5a0b81c204 100644 --- a/modules/@angular/common/src/location/hash_location_strategy.ts +++ b/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]}) - * @RouteConfig([ - * {...}, - * ]) - * class AppCmp { - * constructor(location: Location) { - * location.go('/foo'); - * } - * } - * - * bootstrap(AppCmp, [ - * ROUTER_PROVIDERS, - * {provide: LocationStrategy, useClass: HashLocationStrategy} - * ]); + * @NgModule({ + * providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}] + * }) + * class AppModule {} * ``` * * @stable diff --git a/modules/@angular/common/src/location/location.ts b/modules/@angular/common/src/location/location.ts index 6739a5029e..b7fbc1cfe1 100644 --- a/modules/@angular/common/src/location/location.ts +++ b/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]}) - * @RouteConfig([ - * {...}, - * ]) + * @Component({selector: 'app-component'}) * class AppCmp { * constructor(location: Location) { * location.go('/foo'); * } * } - * - * bootstrap(AppCmp, [ROUTER_PROVIDERS]); * ``` * * @stable diff --git a/modules/@angular/common/src/location/location_strategy.ts b/modules/@angular/common/src/location/location_strategy.ts index 8ee122cf9f..9ec9f084fa 100644 --- a/modules/@angular/common/src/location/location_strategy.ts +++ b/modules/@angular/common/src/location/location_strategy.ts @@ -49,24 +49,15 @@ export abstract class LocationStrategy { * * ### Example * - * ``` - * import {Component} from '@angular/core'; - * import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from '@angular/router'; + * import {Component, NgModule} from '@angular/core'; * import {APP_BASE_HREF} from '@angular/common'; * - * @Component({directives: [ROUTER_DIRECTIVES]}) - * @RouteConfig([ - * {...}, - * ]) - * class AppCmp { - * // ... - * } - * - * bootstrap(AppCmp, [ - * ROUTER_PROVIDERS, - * {provide: APP_BASE_HREF, useValue: '/my/app'} - * ]); + * @NgModule({ + * providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}] + * }) + * class AppModule {} * ``` + * * @stable */ export const APP_BASE_HREF: OpaqueToken = new OpaqueToken('appBaseHref'); diff --git a/modules/@angular/compiler/src/compiler.ts b/modules/@angular/compiler/src/compiler.ts index 8637217dcc..1f70eac70f 100644 --- a/modules/@angular/compiler/src/compiler.ts +++ b/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) { diff --git a/modules/@angular/core/src/change_detection/change_detector_ref.ts b/modules/@angular/core/src/change_detection/change_detector_ref.ts index a004984909..e91a7cd573 100644 --- a/modules/@angular/core/src/change_detection/change_detector_ref.ts +++ b/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; diff --git a/modules/@angular/core/src/di/metadata.ts b/modules/@angular/core/src/di/metadata.ts index ee727aa181..a30e4f7b83 100644 --- a/modules/@angular/core/src/di/metadata.ts +++ b/modules/@angular/core/src/di/metadata.ts @@ -237,8 +237,6 @@ export class SkipSelfMetadata { * }) * class App { * } - * - * bootstrap(App); *``` * @stable */ diff --git a/modules/@angular/core/src/metadata.ts b/modules/@angular/core/src/metadata.ts index b218102264..9465d6b7ac 100644 --- a/modules/@angular/core/src/metadata.ts +++ b/modules/@angular/core/src/metadata.ts @@ -981,8 +981,6 @@ export var Pipe: 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 diff --git a/modules/@angular/core/src/metadata/directives.ts b/modules/@angular/core/src/metadata/directives.ts index 77b0bf0b2e..2662f9f2f2 100644 --- a/modules/@angular/core/src/metadata/directives.ts +++ b/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 */ diff --git a/modules/@angular/core/src/metadata/lifecycle_hooks.ts b/modules/@angular/core/src/metadata/lifecycle_hooks.ts index 7423e0c8e7..6e41d87f59 100644 --- a/modules/@angular/core/src/metadata/lifecycle_hooks.ts +++ b/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,9 +123,7 @@ export abstract class OnChanges { abstract ngOnChanges(changes: SimpleChanges): * export class App { * hasChild = true; * } - * - * bootstrap(App).catch(err => console.error(err)); - * ``` + * ``` * @stable */ export abstract class OnInit { abstract ngOnInit(): void; } @@ -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 */ diff --git a/modules/@angular/examples/compiler/ts/url_resolver/url_resolver.ts b/modules/@angular/examples/compiler/ts/url_resolver/url_resolver.ts index eed80cb240..b14bb3c853 100644 --- a/modules/@angular/examples/compiler/ts/url_resolver/url_resolver.ts +++ b/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 diff --git a/modules/@angular/examples/core/pipes/ts/async_pipe/async_pipe_example.ts b/modules/@angular/examples/core/pipes/ts/async_pipe/async_pipe_example.ts index 1d4d572608..63ce80a805 100644 --- a/modules/@angular/examples/core/pipes/ts/async_pipe/async_pipe_example.ts +++ b/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 {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 {Observable, Subscriber} from 'rxjs/Rx'; // #docregion AsyncPipePromise @@ -62,6 +63,10 @@ class Task { export class AppCmp { } -export function main() { - bootstrap(AppCmp); +@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]}) +class AppModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(AppModule); } diff --git a/modules/@angular/examples/core/pipes/ts/date_pipe/date_pipe_example.ts b/modules/@angular/examples/core/pipes/ts/date_pipe/date_pipe_example.ts index 3b6a1aab7e..a6f498c924 100644 --- a/modules/@angular/examples/core/pipes/ts/date_pipe/date_pipe_example.ts +++ b/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 {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'; // #docregion DatePipe @Component({ @@ -34,6 +35,10 @@ export class DatePipeExample { export class AppCmp { } -export function main() { - bootstrap(AppCmp); +@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]}) +class AppModule { } + +export function main() { + platformBrowserDynamic().bootstrapModule(AppModule); +} \ No newline at end of file diff --git a/modules/@angular/examples/core/pipes/ts/json_pipe/json_pipe_example.ts b/modules/@angular/examples/core/pipes/ts/json_pipe/json_pipe_example.ts index e6b97dce96..4d5f7fbf7d 100644 --- a/modules/@angular/examples/core/pipes/ts/json_pipe/json_pipe_example.ts +++ b/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 {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'; // #docregion JsonPipe @Component({ @@ -35,6 +36,10 @@ export class JsonPipeExample { export class AppCmp { } -export function main() { - bootstrap(AppCmp); +@NgModule({imports: [BrowserModule], bootstrap: [AppCmp], declarations: [AppCmp, JsonPipeExample]}) +class AppModule { } + +export function main() { + platformBrowserDynamic().bootstrapModule(AppModule); +} \ No newline at end of file diff --git a/modules/@angular/examples/core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts b/modules/@angular/examples/core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts index dc842a2c95..e65667425f 100644 --- a/modules/@angular/examples/core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts +++ b/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 {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'; // #docregion LowerUpperPipe @Component({ @@ -35,6 +36,10 @@ export class LowerUpperPipeExample { export class AppCmp { } -export function main() { - bootstrap(AppCmp); +@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]}) +class AppModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(AppModule); } diff --git a/modules/@angular/examples/core/pipes/ts/number_pipe/number_pipe_example.ts b/modules/@angular/examples/core/pipes/ts/number_pipe/number_pipe_example.ts index f369586e27..e5f7247da1 100644 --- a/modules/@angular/examples/core/pipes/ts/number_pipe/number_pipe_example.ts +++ b/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 {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'; // #docregion NumberPipe @Component({ @@ -69,6 +70,10 @@ export class CurrencyPipeExample { export class AppCmp { } -export function main() { - bootstrap(AppCmp); +@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]}) +class AppModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(AppModule); } diff --git a/modules/@angular/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts b/modules/@angular/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts index 70d0413809..267a105ef0 100644 --- a/modules/@angular/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts +++ b/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 {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'; // #docregion SlicePipe_string @Component({ @@ -50,6 +51,10 @@ export class SlicePipeListExample { export class AppCmp { } -export function main() { - bootstrap(AppCmp); +@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]}) +class AppModule { } + +export function main() { + platformBrowserDynamic().bootstrapModule(AppModule); +} \ No newline at end of file diff --git a/modules/@angular/examples/core/ts/bootstrap/bootstrap.ts b/modules/@angular/examples/core/ts/bootstrap/bootstrap.ts index f737a8e92c..26d3c81994 100644 --- a/modules/@angular/examples/core/ts/bootstrap/bootstrap.ts +++ b/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 {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'; // #docregion bootstrap @Component({selector: 'my-app', template: 'Hello {{ name }}!'}) @@ -15,7 +16,12 @@ class MyApp { name: string = 'World'; } -function main() { - return bootstrap(MyApp); +@NgModule({imports: [BrowserModule], bootstrap: [MyApp]}) +class AppModule { } + +export function main() { + platformBrowserDynamic().bootstrapModule(AppModule); +} + // #enddocregion diff --git a/modules/@angular/examples/core/ts/prod_mode/prod_mode_example.ts b/modules/@angular/examples/core/ts/prod_mode/prod_mode_example.ts index 077105720d..4dcb7a55e2 100644 --- a/modules/@angular/examples/core/ts/prod_mode/prod_mode_example.ts +++ b/modules/@angular/examples/core/ts/prod_mode/prod_mode_example.ts @@ -7,10 +7,14 @@ */ // #docregion enableProdMode -import {enableProdMode} from '@angular/core'; -import {bootstrap} from '@angular/platform-browser-dynamic'; +import {NgModule, enableProdMode} from '@angular/core'; +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 diff --git a/modules/@angular/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts b/modules/@angular/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts index 569d04427e..0e47ad0b6f 100644 --- a/modules/@angular/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts +++ b/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 diff --git a/modules/@angular/facade/src/exception_handler.ts b/modules/@angular/facade/src/exception_handler.ts index 1d87ee225a..e05d0c94cb 100644 --- a/modules/@angular/facade/src/exception_handler.ts +++ b/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 */ diff --git a/modules/@angular/http/http.ts b/modules/@angular/http/http.ts index 5b185824c0..aa2f079a0b 100644 --- a/modules/@angular/http/http.ts +++ b/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}]) - * .catch(err => console.error(err)); + * @NgModule({ + * imports: [HttpModule], + * providers: [{provide: RequestOptions, useClass: MyOptions}] + * }) + * class MyModule {} * ``` * * Likewise, to use a mock backend for unit tests, the {@link XHRBackend} diff --git a/modules/@angular/platform-browser-dynamic/index.ts b/modules/@angular/platform-browser-dynamic/index.ts index 882ffd60e0..d33f00d0bc 100644 --- a/modules/@angular/platform-browser-dynamic/index.ts +++ b/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 - * - * - * - * loading... - * - * - * ``` - * - * 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( - appComponentType: Type, customProviders?: Provider[]): Promise> { - 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. * diff --git a/modules/@angular/platform-browser/test/browser/bootstrap_spec.ts b/modules/@angular/platform-browser/test/browser/bootstrap_spec.ts index 8ad8248b38..02b786c9d3 100644 --- a/modules/@angular/platform-browser/test/browser/bootstrap_spec.ts +++ b/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 { + @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); - - var refPromise = - bootstrap(HelloRootCmp, [{provide: ExceptionHandler, useValue: exceptionHandler}]); - refPromise.then(null, (reason) => { + bootstrap(HelloRootCmp, [ + {provide: ExceptionHandler, useValue: exceptionHandler} + ]).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!'); diff --git a/modules/@angular/router/testing/router_testing_module.ts b/modules/@angular/router/testing/router_testing_module.ts index 72c98ec8d0..a24df2491d 100644 --- a/modules/@angular/router/testing/router_testing_module.ts +++ b/modules/@angular/router/testing/router_testing_module.ts @@ -68,18 +68,16 @@ function setupTestingRouter( @NgModule({ exports: [RouterModule], providers: [ - ROUTER_PROVIDERS, - {provide: Location, useClass: SpyLocation}, + ROUTER_PROVIDERS, {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 { diff --git a/modules/benchmarks/src/costs/index.ts b/modules/benchmarks/src/costs/index.ts index f12c6a7d0e..ff295d9b19 100644 --- a/modules/benchmarks/src/costs/index.ts +++ b/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 { +} \ No newline at end of file diff --git a/modules/benchmarks/src/naive_infinite_scroll/index.ts b/modules/benchmarks/src/naive_infinite_scroll/index.ts index f1d2a55486..441214fe0a 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/index.ts +++ b/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()); -} - -function createBindings(): any[] { - return []; -} + platformBrowserDynamic().bootstrapModule(AppModule); +} \ No newline at end of file diff --git a/modules/benchmarks/src/page_load/page_load.ts b/modules/benchmarks/src/page_load/page_load.ts index 1abb50e93e..8430b53c73 100644 --- a/modules/benchmarks/src/page_load/page_load.ts +++ b/modules/benchmarks/src/page_load/page_load.ts @@ -1,11 +1,19 @@ -import {Component} from 'angular2/core'; -import {bootstrap} from 'angular2/platform/browser'; +import {Component, NgModule} from 'angular2/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; @Component({selector: 'app', template: '

Page Load Time

'}) class App { } -bootstrap(App).then(() => { +@NgModule({ + imports: [BrowserModule], + bootstrap: [App], +}) +class AppModule { +} + +platformBrowserDynamic().bootstrapModule(App).then(() => { (window).loadTime = Date.now() - performance.timing.navigationStart; (window).someConstant = 1234567890; }); diff --git a/modules/benchmarks/src/static_tree/tree_benchmark.ts b/modules/benchmarks/src/static_tree/tree_benchmark.ts index 0b152fc288..24d84e8b37 100644 --- a/modules/benchmarks/src/static_tree/tree_benchmark.ts +++ b/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); diff --git a/modules/benchmarks/src/tree/tree_benchmark.ts b/modules/benchmarks/src/tree/tree_benchmark.ts index cedebcceca..fb2bd04c82 100644 --- a/modules/benchmarks/src/tree/tree_benchmark.ts +++ b/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); diff --git a/modules/payload_tests/hello_world/ts/systemjs/index.ts b/modules/payload_tests/hello_world/ts/systemjs/index.ts index e96010d7e6..61e389ee61 100644 --- a/modules/payload_tests/hello_world/ts/systemjs/index.ts +++ b/modules/payload_tests/hello_world/ts/systemjs/index.ts @@ -1,5 +1,6 @@ -import {Component} from '@angular/core'; -import {bootstrap} from '@angular/platform-browser'; +import {Component, NgModule} from '@angular/core'; +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); diff --git a/modules/payload_tests/hello_world/ts/webpack/index.ts b/modules/payload_tests/hello_world/ts/webpack/index.ts index 6c685714f8..88189de505 100644 --- a/modules/payload_tests/hello_world/ts/webpack/index.ts +++ b/modules/payload_tests/hello_world/ts/webpack/index.ts @@ -1,5 +1,6 @@ -import {Component} from '@angular/core'; -import {bootstrap} from '@angular/platform-browser'; +import {Component, NgModule} from '@angular/core'; +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); +} diff --git a/modules/playground/src/animate/index.ts b/modules/playground/src/animate/index.ts index d7c6204225..6eb5a4b403 100644 --- a/modules/playground/src/animate/index.ts +++ b/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 {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 {AnimateApp} from './app/animate-app'; -export function main() { - bootstrap(AnimateApp); +@NgModule({bootstrap: [AnimateApp], imports: [BrowserModule]}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/async/index.ts b/modules/playground/src/async/index.ts index 0b677c399f..5ff909c5aa 100644 --- a/modules/playground/src/async/index.ts +++ b/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} 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: 'async-app', @@ -32,8 +32,7 @@ import {bootstrap} from '@angular/platform-browser-dynamic'; - `, - directives: [NgIf] + ` }) class AsyncApplication { val1: number = 0; @@ -99,6 +98,10 @@ class AsyncApplication { }; } -export function main() { - bootstrap(AsyncApplication); +@NgModule({bootstrap: [AsyncApplication], imports: [BrowserModule]}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/gestures/index.ts b/modules/playground/src/gestures/index.ts index 42501142ed..75d99c486a 100644 --- a/modules/playground/src/gestures/index.ts +++ b/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 {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: '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() { - bootstrap(GesturesCmp); +@NgModule({bootstrap: [GesturesCmp], imports: [BrowserModule]}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/hello_world/index.ts b/modules/playground/src/hello_world/index.ts index fabde3caa4..eeac72923a 100644 --- a/modules/playground/src/hello_world/index.ts +++ b/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 {bootstrap} from '@angular/platform-browser-dynamic'; +import {Component, Directive, ElementRef, Injectable, NgModule, Renderer} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; export function main() { - // Bootstrapping only requires specifying a root component. - // 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 tag as temporary content (for - // example 'Loading...') before the application is ready. - bootstrap(HelloCmp); + platformBrowserDynamic().bootstrapModule(ExampleModule); } // 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: `
{{greeting}} world!
- `, - // 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 { +} diff --git a/modules/playground/src/http/index.ts b/modules/playground/src/http/index.ts index e03b511ab1..b9acd7aaf0 100644 --- a/modules/playground/src/http/index.ts +++ b/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() { - bootstrap(HttpCmp, [HTTP_PROVIDERS]); +@NgModule({bootstrap: [HttpCmp], providers: [HTTP_PROVIDERS], imports: [BrowserModule]}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/jsonp/index.ts b/modules/playground/src/jsonp/index.ts index 9559e4893e..879bebba17 100644 --- a/modules/playground/src/jsonp/index.ts +++ b/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() { - bootstrap(JsonpCmp, [JSONP_PROVIDERS]); +@NgModule({ + bootstrap: [JsonpCmp], + declarations: [JsonpCmp], + providers: [JSONP_PROVIDERS], + imports: [BrowserModule] +}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/key_events/index.ts b/modules/playground/src/key_events/index.ts index 962b6ac7ea..99756e24f6 100644 --- a/modules/playground/src/key_events/index.ts +++ b/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 {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'; // 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() { - bootstrap(KeyEventsApp); +@NgModule({bootstrap: [KeyEventsApp], imports: [BrowserModule]}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/model_driven_forms/index.ts b/modules/playground/src/model_driven_forms/index.ts index 624940f060..6f4c8987af 100644 --- a/modules/playground/src/model_driven_forms/index.ts +++ b/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} from '@angular/core'; +import {Component, Directive, Host, NgModule} 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 {bootstrap} from '@angular/platform-browser-dynamic'; +import {AbstractControl, FormBuilder, FormGroup, FormGroupDirective, ReactiveFormsModule, Validators} from '@angular/forms'; +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: ` {{errorMessage}} - `, - directives: [NgIf] + ` }) class ShowError { formDir: any /** TODO #9100 */; @@ -132,8 +131,7 @@ class ShowError { - `, - directives: [REACTIVE_FORM_DIRECTIVES, NgFor, ShowError] + ` }) class ReactiveForms { form: any /** TODO #9100 */; @@ -158,6 +156,14 @@ class ReactiveForms { } } -export function main() { - bootstrap(ReactiveForms); +@NgModule({ + bootstrap: [ReactiveForms], + declarations: [ShowError], + imports: [BrowserModule, ReactiveFormsModule] +}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/order_management/index.ts b/modules/playground/src/order_management/index.ts index fbf35bd833..67910411e0 100644 --- a/modules/playground/src/order_management/index.ts +++ b/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, Output} from '@angular/core'; +import {Component, EventEmitter, Injectable, Input, NgModule, Output} from '@angular/core'; import {ListWrapper} from '@angular/core/src/facade/collection'; -import {FORM_DIRECTIVES} from '@angular/forms'; -import {bootstrap} from '@angular/platform-browser-dynamic'; +import {FormsModule} from '@angular/forms'; +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 { - `, - directives: [FORM_DIRECTIVES, NgFor] + ` }) class OrderListComponent { orders: Order[]; @@ -137,8 +136,7 @@ class OrderListComponent { - `, - directives: [FORM_DIRECTIVES] + ` }) class OrderItemComponent { @Input() item: OrderItem; @@ -174,8 +172,7 @@ class OrderItemComponent { - `, - directives: [FORM_DIRECTIVES, OrderItemComponent, NgFor, NgIf] + ` }) class OrderDetailsComponent { constructor(private _service: DataService) {} @@ -193,12 +190,19 @@ class OrderDetailsComponent { template: ` - `, - directives: [OrderListComponent, OrderDetailsComponent] + ` }) class OrderManagementApplication { } -export function main() { - bootstrap(OrderManagementApplication); +@NgModule({ + bootstrap: [OrderManagementApplication], + declarations: [OrderListComponent, OrderDetailsComponent, OrderItemComponent], + imports: [BrowserModule, FormsModule] +}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/person_management/index.ts b/modules/playground/src/person_management/index.ts index 3b9204b373..371f9071e4 100644 --- a/modules/playground/src/person_management/index.ts +++ b/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} from '@angular/core'; -import {FORM_DIRECTIVES} from '@angular/forms'; -import {bootstrap} from '@angular/platform-browser-dynamic'; +import {Component, Injectable, NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {BrowserModule} from '@angular/platform-browser'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; /** * You can find the Angular 1 implementation of this example here: @@ -100,8 +100,7 @@ class DataService { - `, - directives: [FORM_DIRECTIVES] + ` }) class FullNameComponent { constructor(private _service: DataService) {} @@ -148,8 +147,7 @@ class FullNameComponent { - `, - directives: [FORM_DIRECTIVES, NgIf] + ` }) class PersonsDetailComponent { constructor(private _service: DataService) {} @@ -169,8 +167,7 @@ class PersonsDetailComponent { - `, - directives: [FORM_DIRECTIVES, PersonsDetailComponent, NgFor] + ` }) class PersonsComponent { persons: Person[]; @@ -190,8 +187,7 @@ class PersonsComponent { - `, - directives: [FullNameComponent, PersonsComponent, NgIf] + ` }) class PersonManagementApplication { mode: string; @@ -200,6 +196,14 @@ class PersonManagementApplication { switchToPersonList(): void { this.mode = 'personList'; } } -export function main() { - bootstrap(PersonManagementApplication); +@NgModule({ + bootstrap: [PersonManagementApplication], + declarations: [FullNameComponent, PersonsComponent, PersonsDetailComponent], + imports: [BrowserModule, FormsModule] +}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/relative_assets/index.ts b/modules/playground/src/relative_assets/index.ts index 43a1790401..55e3335eb3 100644 --- a/modules/playground/src/relative_assets/index.ts +++ b/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 {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 {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 { +} diff --git a/modules/playground/src/sourcemap/index.ts b/modules/playground/src/sourcemap/index.ts index a992248417..a640b30335 100644 --- a/modules/playground/src/sourcemap/index.ts +++ b/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() { - bootstrap(ErrorComponent); +@NgModule({bootstrap: [ErrorComponent], imports: [BrowserModule]}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/svg/index.ts b/modules/playground/src/svg/index.ts index 1b3b5a8ff2..a576ba2496 100644 --- a/modules/playground/src/svg/index.ts +++ b/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 {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: '[svg-group]', template: `Hello`}) class SvgGroup { } - @Component({ selector: 'svg-app', template: ` - `, - directives: [SvgGroup] + ` }) class SvgApp { } +@NgModule({bootstrap: [SvgApp], declarations: [SvgGroup], imports: [BrowserModule]}) +class ExampleModule { +} export function main() { - bootstrap(SvgApp); + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/template_driven_forms/index.ts b/modules/playground/src/template_driven_forms/index.ts index 2d999a9675..5111902989 100644 --- a/modules/playground/src/template_driven_forms/index.ts +++ b/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); } diff --git a/modules/playground/src/todo/index.ts b/modules/playground/src/todo/index.ts index 2713c34e6a..246a6f9470 100644 --- a/modules/playground/src/todo/index.ts +++ b/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} 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'; import {Store, Todo, TodoFactory} from './app/TodoStore'; -@Component({ - selector: 'todo-app', - viewProviders: [Store, TodoFactory], - templateUrl: 'todo.html', - directives: [NgFor] -}) +@Component({selector: 'todo-app', viewProviders: [Store, TodoFactory], templateUrl: 'todo.html'}) class TodoApp { todoEdit: Todo = null; @@ -56,6 +51,10 @@ class TodoApp { clearCompleted(): void { this.todoStore.removeBy((todo: Todo) => todo.completed); } } -export function main() { - bootstrap(TodoApp); +@NgModule({bootstrap: [TodoApp], imports: [BrowserModule]}) +class ExampleModule { +} + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); } diff --git a/modules/playground/src/web_workers/images/single_thread.ts b/modules/playground/src/web_workers/images/single_thread.ts index 31352ce76e..e4854a6ebb 100644 --- a/modules/playground/src/web_workers/images/single_thread.ts +++ b/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() { - bootstrap(ImageDemo); +@NgModule({bootstrap: [ImageDemo], imports: [BrowserModule]}) +class ExampleModule { } + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); +} \ No newline at end of file diff --git a/modules/playground/src/zippy_component/index.ts b/modules/playground/src/zippy_component/index.ts index fab04ffce8..da6b225811 100644 --- a/modules/playground/src/zippy_component/index.ts +++ b/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 {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 {Zippy} from './app/zippy'; @@ -29,6 +30,10 @@ class ZippyApp { pushLog(log: string) { this.logs.push(log); } } -export function main() { - bootstrap(ZippyApp); +@NgModule({bootstrap: [ZippyApp], imports: [BrowserModule]}) +class ExampleModule { } + +export function main() { + platformBrowserDynamic().bootstrapModule(ExampleModule); +} \ No newline at end of file diff --git a/modules/rollup-test/hello_world.ts b/modules/rollup-test/hello_world.ts index 65c7ea9da4..d36a67e823 100644 --- a/modules/rollup-test/hello_world.ts +++ b/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); \ No newline at end of file diff --git a/tools/public_api_guard/platform-browser-dynamic/index.d.ts b/tools/public_api_guard/platform-browser-dynamic/index.d.ts index d6ee42d97e..6ebf2b0fc0 100644 --- a/tools/public_api_guard/platform-browser-dynamic/index.d.ts +++ b/tools/public_api_guard/platform-browser-dynamic/index.d.ts @@ -1,6 +1,3 @@ -/** @deprecated */ -export declare function bootstrap(appComponentType: Type, customProviders?: Provider[]): Promise>; - /** @experimental */ export declare function bootstrapWorkerUi(workerScriptUri: string, customProviders?: Provider[]): Promise;