diff --git a/aio/content/guide/deprecations.md b/aio/content/guide/deprecations.md index f3a92f5357a..8b7d3b8222d 100644 --- a/aio/content/guide/deprecations.md +++ b/aio/content/guide/deprecations.md @@ -41,6 +41,8 @@ v12 - v15 | `@angular/core` | [`ReflectiveKey`](#core) | v11 | | `@angular/core` | [`RenderComponentType`](#core) | v11 | | `@angular/core` | [`WrappedValue`](#core) | v12 | +| `@angular/core` | [Factory-based signature of `ApplicationRef.bootstrap`](#core) | v15 | +| `@angular/core` | [`PlatformRef.bootstrapModuleFactory`](#core) | v15 | | `@angular/forms` | [`ngModel` with reactive forms](#ngmodel-reactive) | v11 | | `@angular/upgrade` | [`@angular/upgrade`](#upgrade) | v11 | | `@angular/upgrade` | [`getAngularLib`](#upgrade-static) | v11 | @@ -102,6 +104,8 @@ This section contains a complete list all of the currently-deprecated APIs, with | [`WrappedValue`](api/core/WrappedValue) | none | v10 | See [removing `WrappedValue`](#wrapped-value) | | [`async`](api/core/testing/async) | [`waitForAsync`](api/core/testing/waitForAsync) | v11 | The `async` function from `@angular/core/testing` has been renamed to `waitForAsync` in order to avoid confusion with the native JavaScript `async` syntax. The existing function is deprecated and will be removed in a future version. | | `ViewChildren.emitDistinctChangesOnly` / `ContentChildren.emitDistinctChangesOnly` | none (was part of [issue #40091](https://github.com/angular/angular/issues/40091)) | | This is a temporary flag introduced as part of bugfix of [issue #40091](https://github.com/angular/angular/issues/40091) and will be removed. | +| Factory-based signature of [`ApplicationRef.bootstrap`](api/core/ApplicationRef#bootstrap) | Type-based signature of [`ApplicationRef.bootstrap`](api/core/ApplicationRef#bootstrap) | v13 | With Ivy, there is no need to resolve Component factory and Component Type can be provided directly. | +| [`PlatformRef.bootstrapModuleFactory`](api/core/PlatformRef#bootstrapModuleFactory) | [`PlatformRef.bootstrapModule`](api/core/PlatformRef#bootstrapModule) | v13 | With Ivy, there is no need to resolve NgModule factory and NgModule Type can be provided directly. | {@a testing} diff --git a/goldens/public-api/core/core.md b/goldens/public-api/core/core.md index 8c85de60746..1af481e097d 100644 --- a/goldens/public-api/core/core.md +++ b/goldens/public-api/core/core.md @@ -53,7 +53,7 @@ export class ApplicationInitStatus { readonly done = false; // (undocumented) readonly donePromise: Promise; - } +} // @public export class ApplicationModule { @@ -63,14 +63,16 @@ export class ApplicationModule { // @public export class ApplicationRef { attachView(viewRef: ViewRef): void; - bootstrap(componentOrFactory: ComponentFactory | Type, rootSelectorOrNode?: string | any): ComponentRef; + bootstrap(component: Type, rootSelectorOrNode?: string | any): ComponentRef; + // @deprecated + bootstrap(componentFactory: ComponentFactory, rootSelectorOrNode?: string | any): ComponentRef; readonly components: ComponentRef[]; readonly componentTypes: Type[]; detachView(viewRef: ViewRef): void; readonly isStable: Observable; tick(): void; get viewCount(): number; - } +} // @public (undocumented) export function asNativeElements(debugEls: DebugElement[]): any; @@ -361,7 +363,7 @@ export class DefaultIterableDiffer implements IterableDiffer, IterableChan readonly length: number; // (undocumented) onDestroy(): void; - } +} // @public @deprecated (undocumented) export const defineInjectable: typeof ɵɵdefineInjectable; @@ -946,6 +948,7 @@ export const platformCore: (extraProviders?: StaticProvider[] | undefined) => Pl // @public export class PlatformRef { bootstrapModule(moduleType: Type, compilerOptions?: (CompilerOptions & BootstrapOptions) | Array): Promise>; + // @deprecated bootstrapModuleFactory(moduleFactory: NgModuleFactory, options?: BootstrapOptions): Promise>; destroy(): void; // (undocumented) @@ -1215,7 +1218,7 @@ export class SystemJsNgModuleLoader implements NgModuleFactoryLoader { constructor(_compiler: Compiler, config?: SystemJsNgModuleLoaderConfig); // (undocumented) load(path: string): Promise>; - } +} // @public @deprecated export abstract class SystemJsNgModuleLoaderConfig { @@ -1410,7 +1413,6 @@ export function ɵɵinject(token: ProviderToken, flags?: InjectFlags): T | // @public export function ɵɵinjectAttribute(attrNameToInject: string): string | null; - // (No @packageDocumentation comment for this package) ``` diff --git a/packages/core/src/application_ref.ts b/packages/core/src/application_ref.ts index ea4de55bcac..0327dfb6b87 100644 --- a/packages/core/src/application_ref.ts +++ b/packages/core/src/application_ref.ts @@ -330,6 +330,9 @@ export class PlatformRef { * * let moduleRef = platformBrowser().bootstrapModuleFactory(MyModuleNgFactory); * ``` + * + * @deprecated Passing NgModule factories as the `PlatformRef.bootstrapModuleFactory` function + * argument is deprecated. Use the `PlatformRef.bootstrapModule` API instead. */ bootstrapModuleFactory(moduleFactory: NgModuleFactory, options?: BootstrapOptions): Promise> { @@ -685,6 +688,88 @@ export class ApplicationRef { merge(isCurrentlyStable, isStable.pipe(share())); } + /** + * Bootstrap a component onto the element identified by its selector or, optionally, to a + * specified element. + * + * @usageNotes + * ### Bootstrap process + * + * When bootstrapping a component, Angular mounts it onto a target DOM element + * and kicks off automatic change detection. The target DOM element can be + * provided using the `rootSelectorOrNode` argument. + * + * If the target DOM element is not provided, Angular tries to find one on a page + * using the `selector` of the component that is being bootstrapped + * (first matched element is used). + * + * ### Example + * + * Generally, we define the component to bootstrap in the `bootstrap` array of `NgModule`, + * but it requires us to know the component while writing the application code. + * + * Imagine a situation where we have to wait for an API call to decide about the component to + * bootstrap. We can use the `ngDoBootstrap` hook of the `NgModule` and call this method to + * dynamically bootstrap a component. + * + * {@example core/ts/platform/platform.ts region='componentSelector'} + * + * Optionally, a component can be mounted onto a DOM element that does not match the + * selector of the bootstrapped component. + * + * In the following example, we are providing a CSS selector to match the target element. + * + * {@example core/ts/platform/platform.ts region='cssSelector'} + * + * While in this example, we are providing reference to a DOM node. + * + * {@example core/ts/platform/platform.ts region='domNode'} + */ + bootstrap(component: Type, rootSelectorOrNode?: string|any): ComponentRef; + + /** + * Bootstrap a component onto the element identified by its selector or, optionally, to a + * specified element. + * + * @usageNotes + * ### Bootstrap process + * + * When bootstrapping a component, Angular mounts it onto a target DOM element + * and kicks off automatic change detection. The target DOM element can be + * provided using the `rootSelectorOrNode` argument. + * + * If the target DOM element is not provided, Angular tries to find one on a page + * using the `selector` of the component that is being bootstrapped + * (first matched element is used). + * + * ### Example + * + * Generally, we define the component to bootstrap in the `bootstrap` array of `NgModule`, + * but it requires us to know the component while writing the application code. + * + * Imagine a situation where we have to wait for an API call to decide about the component to + * bootstrap. We can use the `ngDoBootstrap` hook of the `NgModule` and call this method to + * dynamically bootstrap a component. + * + * {@example core/ts/platform/platform.ts region='componentSelector'} + * + * Optionally, a component can be mounted onto a DOM element that does not match the + * selector of the bootstrapped component. + * + * In the following example, we are providing a CSS selector to match the target element. + * + * {@example core/ts/platform/platform.ts region='cssSelector'} + * + * While in this example, we are providing reference to a DOM node. + * + * {@example core/ts/platform/platform.ts region='domNode'} + * + * @deprecated Passing Component factories as the `Application.bootstrap` function argument is + * deprecated. Pass Component Types instead. + */ + bootstrap(componentFactory: ComponentFactory, rootSelectorOrNode?: string|any): + ComponentRef; + /** * Bootstrap a component onto the element identified by its selector or, optionally, to a * specified element.