Standalone bootstrapApplication — how does Angular bootstrap without NgModules in 2025?

Q: Standalone bootstrapApplication — how does Angular bootstrap without NgModules in 2025?

**Target Audience:** Developers who can bootstrap an app and now want to explain what happens underneath, for senior interviews or for debugging startup problems. **Difficulty:** Medium to Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The sequence below was read from the installed Angular 22.2.3 source ( bootstrapApplication in @angular/platform-browser , internalCreateApplication and bootstrap in @angular/core ) and then confirmed by an instrumented app compiled with ngc and booted in jsdom. The title says 2025; the behaviour is described as of 22.2.3, with the version history in section 7. This is the **internals** doc. For the practical how-to (which files, what goes in appConfig , common errors) see [how to bootstrap a standalone Angular application](/interview-question/how-do-you-bootstrap-a-standalone-angular-application). ## 1. Why Thi

The problem

Question presented to candidate: "With no AppModule, something still has to create the injector, run initializers and render the root component. Explain what bootstrapApplication actually does, in order, and how that differs from the old bootstrapModule path."

What a strong answer should cover:

A platform injector is created (or reused) once per page; an environment (application) injector is created from the ApplicationConfig providers, with the platform injector as parent.
Angular prepends its own providers: browser essentials and the zoneless change detection setup, so a bare bootstrap uses NoopNgZone.
Order: environment initializers run while the injector is set up, then app initializers (awaited), then the root component is created, change detection runs once, then bootstrap listeners fire.
ApplicationRef.bootstrap(Root) creates the root ComponentRef in the host element and the bootstrap Promise resolves with the ApplicationRef.
Differences from bootstrapModule: no NgModule class or module injector; providers come from a plain array. In v22 both paths are zoneless by default.
Version context: standalone APIs previewed in v14 and stable in v15; standalone by default in v19; zoneless by default in v21.

Clarifying questions expected:

"Do you want the browser path only, or also how SSR passes a platform in?"
"Should I cover change detection after bootstrap, or stop at the first render?"

Code / implementation expected: Optional — an instrumented appConfig that logs each bootstrap phase.

standalone
bootstrap
angular-17

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who can bootstrap an app and now want to explain what happens underneath, for senior interviews or for debugging startup problems. Difficulty: Medium to Hard

How to read this doc: Plain language first, then 📌 Interview term: callouts. The sequence below was read from the installed Angular 22.2.3 source (bootstrapApplication in @angular/platform-browser, internalCreateApplication and bootstrap in @angular/core) and then confirmed by an instrumented app compiled with ngc and booted in jsdom. The title says 2025; the behaviour is described as of 22.2.3, with the version history in section 7.

This is the internals doc. For the practical how-to (which files, what goes in appConfig, common errors) see how to bootstrap a standalone Angular application.

1. Why This Ev

The solution is hidden so you can try first

10 min read · 10 sections

Read the code

AngularInstrumented appConfig that logs every phase of bootstrapApplication

import {
  APP_BOOTSTRAP_LISTENER, ApplicationConfig, ApplicationRef, Component, ComponentRef, Injectable,
  NgZone, afterNextRender, inject, provideAppInitializer, provideEnvironmentInitializer,
} from "@angular/core";

// Every step of bootstrapApplication() writes here, so the order is visible.
export const steps: string[] = [];
const log = (s: string) => steps.push(`${steps.length + 1}. ${s}`);

@Injectable({ providedIn: "root" })
export class Session {
  constructor() { log("Session service created (first inject)"); }
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideEnvironmentInitializer(() => log("environment initializer (sync, while the injector is set up)")),
    provideAppInitializer(() => {
      log("app initializer starts");
      inject(Session);
      return new Promise<void>((done) => setTimeout(() => { log("app initializer resolves"); done(); }, 20));
    }),
    {
      provide: APP_BOOTSTRAP_LISTENER, multi: true,
      useValue: (ref: ComponentRef<unknown>) => log(`bootstrap listener: root <${ref.location.nativeElement.localName}> attached`),
    },
  ],
};

@Component({ selector: "app-root", template: `<p>{{ zone }}</p>` })
export class AppComponent {
  zone = inject(NgZone).constructor.name; // which zone did a bare bootstrap pick?
  steps = steps;
  constructor() {
    log("root component constructor");
    afterNextRender(() => log("afterNextRender: first render is in the DOM"));
  }
  ngOnInit() { log("root ngOnInit (first change detection)"); }
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.