ionic-team/ionic-framework · error · Error

Outlet is not activated

Error message

Outlet is not activated

What it means

Thrown by the `component` getter on IonRouterOutlet when accessed before any route has been activated in that outlet. The getter returns this.activated.instance, but if this.activated is null there is no component instance to return, so it throws to fail fast rather than returning undefined.

Source

Thrown at packages/angular/common/src/directives/navigation/router-outlet.ts:167

      if (context?.route) {
        this.activateWith(context.route, context.injector);
      }
    }

    new Promise((resolve) => componentOnReady(this.nativeEl, resolve)).then(() => {
      if (this._swipeGesture === undefined) {
        this.swipeGesture = this.config.getBoolean('swipeBackEnabled', (this.nativeEl as any).mode === 'ios');
      }
    });
  }

  get isActivated(): boolean {
    return !!this.activated;
  }

  get component(): Record<string, unknown> {
    if (!this.activated) {
      throw new Error('Outlet is not activated');
    }
    return this.activated.instance;
  }

  get activatedRoute(): ActivatedRoute {
    if (!this.activated) {
      throw new Error('Outlet is not activated');
    }
    return this._activatedRoute as ActivatedRoute;
  }

  get activatedRouteData(): Data {
    if (this._activatedRoute) {
      return this._activatedRoute.snapshot.data;
    }
    return {};
  }

View on GitHub (pinned to 625f9c38ad)

Solutions

  1. Check ionRouterOutlet.isActivated before reading component (or activatedRoute).
  2. Defer the access until the activate event fires (subscribe to the outlet's activateEvents / stackDidChange).
  3. Restructure guards/resolvers so they do not depend on the outlet's active instance being present.
  4. Ensure the outlet is not inside a structural directive that removes it before you read it.

Example fix

// before
const active = outlet.component; // throws if not activated

// after
const active = outlet.isActivated ? outlet.component : null;
Defensive patterns

Strategy: validation

Validate before calling

const activeComponent = outlet.isActivated ? outlet.component : null;

Prevention

When it happens

Trigger: Reading ionRouterOutlet.component (or code that reads it, e.g. a guard/resolver accessing the active instance) during the first change-detection cycle before activateWith has run, or when the outlet has been deactivated and then accessed.

Common situations: Accessing the outlet too early in ngOnInit before the router populated it; a lazy-loaded outlet inside an *ngIf that is read before activation; reading component after the user navigated away and the outlet deactivated; guards that assume an active outlet.

Related errors


AI-assisted analysis of ionic-team/ionic-framework@625f9c38ad (2026-08-12). Data as JSON: /api/errors/f345fab4e95efae5. Report an issue: GitHub.