fix(core): Error on invalid APP_ID (#63252)

JeanMeche · thePunderWoman · commit fec7c288e96d · 2025-09-19T15:00:10.000Z
An invalid APP_ID could be responsible to generating broken CSS selectors. (eg `:` is an example for a character that breaks a selector by being a separator for pseudo-selectors.) We now throw an error if the provided value is not alphanumerical PR Close #63252
diff --git a/goldens/public-api/core/errors.api.md b/goldens/public-api/core/errors.api.md
@@ -72,6 +72,8 @@ export const enum RuntimeErrorCode {
     // (undocumented)
     INJECTOR_ALREADY_DESTROYED = 205,
     // (undocumented)
+    INVALID_APP_ID = 211,
+    // (undocumented)
     INVALID_BINDING_TARGET = 316,
     // (undocumented)
     INVALID_DIFFER_INPUT = 900,
diff --git a/packages/core/src/application/application_tokens.ts b/packages/core/src/application/application_tokens.ts
@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {ENVIRONMENT_INITIALIZER, inject, StaticProvider} from '../di';
 import {InjectionToken} from '../di/injection_token';
+import {RuntimeError, RuntimeErrorCode} from '../errors';
 import {getDocument} from '../render3/interfaces/document';
 
 /**
@@ -47,6 +49,24 @@ export const APP_ID = new InjectionToken<string>(ngDevMode ? 'AppId' : '', {
 /** Default value of the `APP_ID` token. */
 const DEFAULT_APP_ID = 'ng';
 
+/** Initializer check for the validity of the APP_ID */
+export const validAppIdInitializer: StaticProvider = {
+  provide: ENVIRONMENT_INITIALIZER,
+  multi: true,
+  useValue: () => {
+    const appId = inject(APP_ID);
+    const isAlphanumeric = /^[a-zA-Z0-9\-_]+$/.test(appId);
+
+    if (!isAlphanumeric) {
+      throw new RuntimeError(
+        RuntimeErrorCode.INVALID_APP_ID,
+        `APP_ID value "${appId}" is not alphanumeric. ` +
+          `The APP_ID must be a string of alphanumeric characters. (a-zA-Z0-9), hyphens (-) and underscores (_) are allowed.`,
+      );
+    }
+  },
+};
+
 /**
  * A function that is executed when a platform is initialized.
  *
diff --git a/packages/core/src/application/create_application.ts b/packages/core/src/application/create_application.ts
@@ -22,6 +22,7 @@ import {errorHandlerEnvironmentInitializer} from '../error_handler';
 import {RuntimeError, RuntimeErrorCode} from '../errors';
 import {PlatformRef} from '../platform/platform_ref';
 import {internalProvideZoneChangeDetection} from '../change_detection/scheduling/ng_zone_scheduling';
+import {validAppIdInitializer} from './application_tokens';
 
 const ZONELESS_BY_DEFAULT = true;
 
@@ -69,6 +70,7 @@ export function internalCreateApplication(config: {
       provideZonelessChangeDetectionInternal(),
       ZONELESS_BY_DEFAULT ? [] : internalProvideZoneChangeDetection({}),
       errorHandlerEnvironmentInitializer,
+      ...(ngDevMode ? [validAppIdInitializer] : []),
       ...(appProviders || []),
     ];
     const adapter = new EnvironmentNgModuleRefAdapter({
diff --git a/packages/core/src/errors.ts b/packages/core/src/errors.ts
@@ -43,6 +43,7 @@ export const enum RuntimeErrorCode {
   MISSING_INJECTION_TOKEN = 208,
   INVALID_MULTI_PROVIDER = -209,
   MISSING_DOCUMENT = 210,
+  INVALID_APP_ID = 211,
 
   // Template Errors
   MULTIPLE_COMPONENTS_MATCH = -300,
diff --git a/packages/core/src/platform/platform_ref.ts b/packages/core/src/platform/platform_ref.ts
@@ -8,6 +8,7 @@
 
 import {compileNgModuleFactory} from '../application/application_ngmodule_factory_compiler';
 import {BootstrapOptions, optionsReducer} from '../application/application_ref';
+import {validAppIdInitializer} from '../application/application_tokens';
 import {provideZonelessChangeDetectionInternal} from '../change_detection/scheduling/zoneless_scheduling_impl';
 import {Injectable, Injector, StaticProvider} from '../di';
 import {errorHandlerEnvironmentInitializer} from '../error_handler';
@@ -77,6 +78,7 @@ export class PlatformRef {
       ...defaultZoneCdProviders,
       ...(_additionalApplicationProviders ?? []),
       errorHandlerEnvironmentInitializer,
+      ...(ngDevMode ? [validAppIdInitializer] : []),
     ];
     _additionalApplicationProviders = undefined;
     const moduleRef = createNgModuleRefWithProviders(
diff --git a/packages/platform-browser/test/browser/bootstrap_spec.ts b/packages/platform-browser/test/browser/bootstrap_spec.ts
@@ -45,6 +45,7 @@ import {
   destroyPlatform,
   providePlatformInitializer,
   ɵcreateOrReusePlatformInjector as createOrReusePlatformInjector,
+  APP_ID,
 } from '@angular/core';
 import {ɵLog as Log, inject, TestBed} from '@angular/core/testing';
 import {BrowserModule} from '../../index';
@@ -801,6 +802,24 @@ describe('bootstrap factory method', () => {
     }, done.fail);
   });
 
+  it('should throw an error if the provided APP_ID is invalid', (done) => {
+    const logger = new MockConsole();
+    const errorHandler = new ErrorHandler();
+    (errorHandler as any)._console = logger as any;
+
+    const refPromise = bootstrap(HelloRootCmp, [{provide: APP_ID, useValue: 'foo:bar'}]);
+    refPromise.then(
+      () => fail(),
+      (reason) => {
+        expect(reason.message).toContain(
+          `NG0211: APP_ID value "foo:bar" is not alphanumeric. The APP_ID must be a string of alphanumeric characters.`,
+        );
+        done();
+        return null;
+      },
+    );
+  });
+
   describe('change detection', () => {
     const log: string[] = [];
 
diff --git a/packages/platform-browser/test/browser/bootstrap_standalone_spec.ts b/packages/platform-browser/test/browser/bootstrap_standalone_spec.ts
@@ -18,6 +18,7 @@ import {
   PlatformRef,
   ɵR3Injector as R3Injector,
   ɵNoopNgZone as NoopNgZone,
+  APP_ID,
 } from '@angular/core';
 import {withBody} from '@angular/private/testing';
 
@@ -250,4 +251,29 @@ describe('bootstrapApplication for standalone components', () => {
       expect(document.body.textContent).toBe('');
     }),
   );
+
+  it('should throw and error if the APP_ID is not valid', async () => {
+    withBody('<test-app></test-app>', async () => {
+      @Component({
+        selector: 'test-app',
+        template: ``,
+        imports: [],
+      })
+      class StandaloneCmp {}
+
+      try {
+        await bootstrapApplication(StandaloneCmp, {
+          providers: [{provide: APP_ID, useValue: 'foo:bar'}],
+        });
+
+        // we expect the bootstrap process to fail because of the invalid APP_ID value
+        fail('Expected to throw');
+      } catch (e: unknown) {
+        expect(e).toBeInstanceOf(Error);
+        expect((e as Error).message).toContain(
+          'APP_ID value "foo:bar" is not alphanumeric. The APP_ID must be a string of alphanumeric characters.',
+        );
+      }
+    });
+  });
 });
