Inject the unique app id of your Angular app

Angular generates a unique id for your app which is available via APP_ID injection token. This is useful if you are in a micro-frontend with multiple Angular apps on the same page and you need a unique value.

import { APP_ID } from "@angular/core";

@Component()
export class MyComponent {
  constructor(@Inject(APP_ID) private appId: string) {
    console.log("App id:", appId); // Example: "pvu"
  }
}

Angular uses the app id for prefixing your CSS selectors when using ViewEncapsulation.Emulated. You can define your own id by providing the token as a provider in your app module:

import { APP_ID } from "@angular/core";

@NgModule({
  // ...
  providers: [
    {
      provide: APP_ID,
      useValue: "42",
    },
  ],
})
export class AppModule {}