mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
refactor(core): generate a static application ID (#49422)
Prior to this change, a random application ID was generated each time which forced users using server rendering to provide an application ID themselves. This was needed to handle rare cases when multiple Angular applications are rendered on the same page.
With this change the application ID is no longer generated randomly and instead it is hard coded.
BREAKING CHANGE:
The `APP_ID` token value is no longer randomly generated. If you are bootstrapping multiple application on the same page you will need to set to provide the `APP_ID` yourself.
```ts
bootstrapApplication(ComponentA, {
providers: [
{ provide: APP_ID, useValue: 'app-a' },
// ... other providers ...
]
});
```
PR Close #49422
This commit is contained in:
parent
630af63fae
commit
82d6fbb109
10 changed files with 6 additions and 37 deletions
|
|
@ -9,13 +9,10 @@
|
|||
import {InjectionToken} from './di/injection_token';
|
||||
|
||||
/**
|
||||
* A [DI token](guide/glossary#di-token "DI token definition") representing a unique string ID, used
|
||||
* A [DI token](guide/glossary#di-token "DI token definition") representing a string ID, used
|
||||
* primarily for prefixing application attributes and CSS styles when
|
||||
* {@link ViewEncapsulation#Emulated ViewEncapsulation.Emulated} is being used.
|
||||
*
|
||||
* 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:
|
||||
|
|
@ -23,21 +20,21 @@ import {InjectionToken} from './di/injection_token';
|
|||
* ```
|
||||
* bootstrapApplication(ComponentA, {
|
||||
* providers: [
|
||||
* {provide: APP_ID, useValue: 'app-a'},
|
||||
* { provide: APP_ID, useValue: 'app-a' },
|
||||
* // ... other providers ...
|
||||
* ]
|
||||
* });
|
||||
*
|
||||
* bootstrapApplication(ComponentB, {
|
||||
* providers: [
|
||||
* {provide: APP_ID, useValue: 'app-b'},
|
||||
* { 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).
|
||||
* By default, when there is only one application bootstrapped, you don't need to provide the
|
||||
* `APP_ID` token (the `ng` will be used as an app ID).
|
||||
*
|
||||
* @publicApi
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
*/
|
||||
|
||||
export {ALLOW_MULTIPLE_PLATFORMS as ɵALLOW_MULTIPLE_PLATFORMS, internalCreateApplication as ɵinternalCreateApplication, provideNgZoneChangeDetection as ɵprovideNgZoneChangeDetection} from './application_ref';
|
||||
export {APP_ID_RANDOM_PROVIDER as ɵAPP_ID_RANDOM_PROVIDER} from './application_tokens';
|
||||
export {defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffers as ɵdefaultKeyValueDiffers} from './change_detection/change_detection';
|
||||
export {Console as ɵConsole} from './console';
|
||||
export {convertToBitFlags as ɵconvertToBitFlags, setCurrentInjector as ɵsetCurrentInjector} from './di/injector_compatibility';
|
||||
|
|
|
|||
|
|
@ -659,9 +659,6 @@
|
|||
{
|
||||
"name": "_query"
|
||||
},
|
||||
{
|
||||
"name": "_randomChar"
|
||||
},
|
||||
{
|
||||
"name": "_retrieveHydrationInfoImpl"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -485,9 +485,6 @@
|
|||
{
|
||||
"name": "_processI18nInsertBefore"
|
||||
},
|
||||
{
|
||||
"name": "_randomChar"
|
||||
},
|
||||
{
|
||||
"name": "_retrieveHydrationInfoImpl"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -668,9 +668,6 @@
|
|||
{
|
||||
"name": "_processI18nInsertBefore"
|
||||
},
|
||||
{
|
||||
"name": "_randomChar"
|
||||
},
|
||||
{
|
||||
"name": "_retrieveHydrationInfoImpl"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -656,9 +656,6 @@
|
|||
{
|
||||
"name": "_processI18nInsertBefore"
|
||||
},
|
||||
{
|
||||
"name": "_randomChar"
|
||||
},
|
||||
{
|
||||
"name": "_retrieveHydrationInfoImpl"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -860,9 +860,6 @@
|
|||
{
|
||||
"name": "_processI18nInsertBefore"
|
||||
},
|
||||
{
|
||||
"name": "_randomChar"
|
||||
},
|
||||
{
|
||||
"name": "_retrieveHydrationInfoImpl"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -446,9 +446,6 @@
|
|||
{
|
||||
"name": "_processI18nInsertBefore"
|
||||
},
|
||||
{
|
||||
"name": "_randomChar"
|
||||
},
|
||||
{
|
||||
"name": "_retrieveHydrationInfoImpl"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -578,9 +578,6 @@
|
|||
{
|
||||
"name": "_processI18nInsertBefore"
|
||||
},
|
||||
{
|
||||
"name": "_randomChar"
|
||||
},
|
||||
{
|
||||
"name": "_retrieveHydrationInfoImpl"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {APP_ID, ApplicationRef, EnvironmentProviders, importProvidersFrom, InjectionToken, NgModuleRef, PlatformRef, Provider, Renderer2, StaticProvider, Type, ɵannotateForHydration as annotateForHydration, ɵgetComponentDef as getComponentDef, ɵinternalCreateApplication as internalCreateApplication, ɵIS_HYDRATION_FEATURE_ENABLED as IS_HYDRATION_FEATURE_ENABLED, ɵisPromise} from '@angular/core';
|
||||
import {ApplicationRef, EnvironmentProviders, importProvidersFrom, InjectionToken, NgModuleRef, PlatformRef, Provider, Renderer2, StaticProvider, Type, ɵannotateForHydration as annotateForHydration, ɵgetComponentDef as getComponentDef, ɵinternalCreateApplication as internalCreateApplication, ɵIS_HYDRATION_FEATURE_ENABLED as IS_HYDRATION_FEATURE_ENABLED, ɵisPromise} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {first} from 'rxjs/operators';
|
||||
|
||||
|
|
@ -49,12 +49,6 @@ function _render<T>(
|
|||
bootstrapPromise: Promise<NgModuleRef<T>|ApplicationRef>): Promise<string> {
|
||||
return bootstrapPromise.then((moduleOrApplicationRef) => {
|
||||
const environmentInjector = moduleOrApplicationRef.injector;
|
||||
const transitionId = environmentInjector.get(APP_ID, null);
|
||||
if (!transitionId) {
|
||||
throw new Error(
|
||||
`renderModule[Factory]() requires the use of BrowserModule.withServerTransition() to ensure
|
||||
the server-rendered app can be properly bootstrapped into a client app.`);
|
||||
}
|
||||
const applicationRef: ApplicationRef = moduleOrApplicationRef instanceof ApplicationRef ?
|
||||
moduleOrApplicationRef :
|
||||
environmentInjector.get(ApplicationRef);
|
||||
|
|
|
|||
Loading…
Reference in a new issue