feat(platform-browser): deprecate withServerTransition call (#49422)

alan-agius4 · alxhub · commit 630af63fae2e · 2023-03-15T17:08:17.000-07:00
This commit deprecated ` BrowserModule.withServerTransition` instead `APP_ID` should be used instead to configure the app id. DEPRECATED: `BrowserModule.withServerTransition` has been deprecated. `APP_ID` should be used instead to set the application ID. NB: Unless, you render multiple Angular applications on the same page, setting an application ID is not necessary. Before: ```ts imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), ... ] ``` After: ```ts imports: [ BrowserModule, { provide: APP_ID, useValue: 'serverApp' }, ... ], ``` PR Close #49422
diff --git a/aio/content/guide/deprecations.md b/aio/content/guide/deprecations.md
@@ -100,6 +100,7 @@ v16 - v19
 | `@angular/platform-server`          | [`ServerTransferStateModule`](#platform-server)                                                            | v14           | v16         |
 | `@angular/service-worker`           | [`SwUpdate#activated`](api/service-worker/SwUpdate#activated)                                              | v13           | v16         |
 | `@angular/service-worker`           | [`SwUpdate#available`](api/service-worker/SwUpdate#available)                                              | v13           | v16         |
+| `@angular/platform-browser`         | [`BrowserModule.withServerTransition`](api/platform-browser/BrowserModule#withservertransition)                                                          | v16           | v18         |
 
 ### Deprecated features that can be removed in v17 or later
 
@@ -204,6 +205,7 @@ In the [API reference section](api) of this site, deprecated APIs are indicated
 | API                                                              | Replacement                                        | Deprecation announced | Details |
 |:---                                                              |:---                                                |:---                   |:---     |
 | [`BrowserTransferStateModule`](api/platform-browser/BrowserTransferStateModule) | No replacement needed.  | v14.1                   | The `TransferState` class is available for injection without importing additional modules on the client side of a server-rendered application. |
+| [`BrowserModule.withServerTransition`](api/platform-browser/BrowserModule#withservertransition) | No replacement needed.  | v16.0                   | The `APP_ID`token should be used instead to set the application ID. |
 
 <a id="platform-browser-dynamic"></a>
 
diff --git a/goldens/public-api/platform-browser/index.md b/goldens/public-api/platform-browser/index.md
@@ -35,6 +35,7 @@ export function bootstrapApplication(rootComponent: Type<unknown>, options?: App
 // @public
 export class BrowserModule {
     constructor(providersAlreadyPresent: boolean | null);
+    // @deprecated
     static withServerTransition(params: {
         appId: string;
     }): ModuleWithProviders<BrowserModule>;
diff --git a/packages/core/src/application_tokens.ts b/packages/core/src/application_tokens.ts
@@ -16,31 +16,38 @@ import {InjectionToken} from './di/injection_token';
  * BY default, the value is randomly generated and assigned to the application by Angular.
  * To provide a custom ID value, use a DI provider <!-- TODO: provider --> to configure
  * the root {@link Injector} that uses this token.
+ * The token is needed in cases when multiple applications are bootstrapped on a page
+ * (for example, using `bootstrapApplication` calls). In this case, ensure that those applications
+ * have different `APP_ID` value setup. For example:
+ *
+ * ```
+ * bootstrapApplication(ComponentA, {
+ *   providers: [
+ *     {provide: APP_ID, useValue: 'app-a'},
+ *     // ... other providers ...
+ *   ]
+ * });
+ *
+ * bootstrapApplication(ComponentB, {
+ *   providers: [
+ *     {provide: APP_ID, useValue: 'app-b'},
+ *     // ... other providers ...
+ *   ]
+ * });
+ * ```
+ *
+ * By default, when there is only 1 application bootstrapped, you don't need to provide the `APP_ID`
+ * token (the `ng` will be used as an app ID).
  *
  * @publicApi
  */
 export const APP_ID = new InjectionToken<string>('AppId', {
   providedIn: 'root',
-  factory: _appIdRandomProviderFactory,
+  factory: () => DEFAULT_APP_ID,
 });
 
-export function _appIdRandomProviderFactory() {
-  return `${_randomChar()}${_randomChar()}${_randomChar()}`;
-}
-
-/**
- * Providers that generate a random `APP_ID_TOKEN`.
- * @publicApi
- */
-export const APP_ID_RANDOM_PROVIDER = {
-  provide: APP_ID,
-  useFactory: _appIdRandomProviderFactory,
-  deps: <any[]>[],
-};
-
-function _randomChar(): string {
-  return String.fromCharCode(97 + Math.floor(Math.random() * 25));
-}
+/** Default value of the `APP_ID` token. */
+const DEFAULT_APP_ID = 'ng';
 
 /**
  * A function that is executed when a platform is initialized.
diff --git a/packages/core/test/bundling/animations/bundle.golden_symbols.json b/packages/core/test/bundling/animations/bundle.golden_symbols.json
@@ -158,6 +158,9 @@
   {
     "name": "DASH_CASE_REGEXP"
   },
+  {
+    "name": "DEFAULT_APP_ID"
+  },
   {
     "name": "DEFAULT_NOOP_PREVIOUS_NODE"
   },
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -83,6 +83,9 @@
   {
     "name": "ConnectableSubscriber"
   },
+  {
+    "name": "DEFAULT_APP_ID"
+  },
   {
     "name": "DI_DECORATOR_FLAG"
   },
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -116,6 +116,9 @@
   {
     "name": "ControlContainer"
   },
+  {
+    "name": "DEFAULT_APP_ID"
+  },
   {
     "name": "DEFAULT_VALUE_ACCESSOR"
   },
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -122,6 +122,9 @@
   {
     "name": "ControlContainer"
   },
+  {
+    "name": "DEFAULT_APP_ID"
+  },
   {
     "name": "DEFAULT_VALUE_ACCESSOR"
   },
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -140,6 +140,9 @@
   {
     "name": "CreateUrlTreeUsingSnapshot"
   },
+  {
+    "name": "DEFAULT_APP_ID"
+  },
   {
     "name": "DEFAULT_LOCALE_ID"
   },
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -68,6 +68,9 @@
   {
     "name": "ConnectableSubscriber"
   },
+  {
+    "name": "DEFAULT_APP_ID"
+  },
   {
     "name": "DEFAULT_LOCALE_ID"
   },
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -83,6 +83,9 @@
   {
     "name": "ConnectableSubscriber"
   },
+  {
+    "name": "DEFAULT_APP_ID"
+  },
   {
     "name": "DI_DECORATOR_FLAG"
   },
diff --git a/packages/platform-browser/src/browser.ts b/packages/platform-browser/src/browser.ts
@@ -245,6 +245,8 @@ export class BrowserModule {
    * @param params An object containing an identifier for the app to transition.
    * The ID must match between the client and server versions of the app.
    * @returns The reconfigured `BrowserModule` to import into the app's root `AppModule`.
+   *
+   * @deprecated Use {@link APP_ID} instead to set the application ID.
    */
   static withServerTransition(params: {appId: string}): ModuleWithProviders<BrowserModule> {
     return {

Original file line number	Diff line number	Diff line change
`@@ -158,6 +158,9 @@`
`158`	`158`	`{`
`159`	`159`	`"name": "DASH_CASE_REGEXP"`
`160`	`160`	`},`
	`161`	`+ {`
	`162`	`+ "name": "DEFAULT_APP_ID"`
	`163`	`+ },`
`161`	`164`	`{`
`162`	`165`	`"name": "DEFAULT_NOOP_PREVIOUS_NODE"`
`163`	`166`	`},`
Original file line number	Diff line number	Diff line change
`@@ -83,6 +83,9 @@`
`83`	`83`	`{`
`84`	`84`	`"name": "ConnectableSubscriber"`
`85`	`85`	`},`
	`86`	`+ {`
	`87`	`+ "name": "DEFAULT_APP_ID"`
	`88`	`+ },`
`86`	`89`	`{`
`87`	`90`	`"name": "DI_DECORATOR_FLAG"`
`88`	`91`	`},`
Original file line number	Diff line number	Diff line change
`@@ -116,6 +116,9 @@`
`116`	`116`	`{`
`117`	`117`	`"name": "ControlContainer"`
`118`	`118`	`},`
	`119`	`+ {`
	`120`	`+ "name": "DEFAULT_APP_ID"`
	`121`	`+ },`
`119`	`122`	`{`
`120`	`123`	`"name": "DEFAULT_VALUE_ACCESSOR"`
`121`	`124`	`},`
Original file line number	Diff line number	Diff line change
`@@ -122,6 +122,9 @@`
`122`	`122`	`{`
`123`	`123`	`"name": "ControlContainer"`
`124`	`124`	`},`
	`125`	`+ {`
	`126`	`+ "name": "DEFAULT_APP_ID"`
	`127`	`+ },`
`125`	`128`	`{`
`126`	`129`	`"name": "DEFAULT_VALUE_ACCESSOR"`
`127`	`130`	`},`
Original file line number	Diff line number	Diff line change
`@@ -140,6 +140,9 @@`
`140`	`140`	`{`
`141`	`141`	`"name": "CreateUrlTreeUsingSnapshot"`
`142`	`142`	`},`
	`143`	`+ {`
	`144`	`+ "name": "DEFAULT_APP_ID"`
	`145`	`+ },`
`143`	`146`	`{`
`144`	`147`	`"name": "DEFAULT_LOCALE_ID"`
`145`	`148`	`},`
Original file line number	Diff line number	Diff line change
`@@ -68,6 +68,9 @@`
`68`	`68`	`{`
`69`	`69`	`"name": "ConnectableSubscriber"`
`70`	`70`	`},`
	`71`	`+ {`
	`72`	`+ "name": "DEFAULT_APP_ID"`
	`73`	`+ },`
`71`	`74`	`{`
`72`	`75`	`"name": "DEFAULT_LOCALE_ID"`
`73`	`76`	`},`