diff --git a/.eslintrc.js b/.eslintrc.js
index eb665f5eaaf..bbf27006b25 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,6 +26,12 @@ module.exports = {
 
     'disable-features/disable-async-await': 'error',
     'disable-features/disable-generator-functions': 'error',
+    'import/no-unresolved': [
+      'error',
+      {
+        ignore: ['@ember/template-compiler'],
+      },
+    ],
   },
 
   settings: {
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
index 4503ffcb43d..449576f4483 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
@@ -1,25 +1,23 @@
 import type { InternalOwner } from '@ember/-internals/owner';
+import type { Nullable } from '@ember/-internals/utility-types';
 import { assert } from '@ember/debug';
 import EngineInstance from '@ember/engine/instance';
 import { _instrumentStart } from '@ember/instrumentation';
+import { precompileTemplate } from '@ember/template-compilation';
 import type {
-  CapturedArguments,
   CompilableProgram,
   ComponentDefinition,
-  CapabilityMask,
   CustomRenderNode,
   Destroyable,
   Environment,
   InternalComponentCapabilities,
-  Template,
   VMArguments,
   WithCreateInstance,
   WithCustomDebugRenderTree,
 } from '@glimmer/interfaces';
-import type { Nullable } from '@ember/-internals/utility-types';
 import { capabilityFlagsFrom } from '@glimmer/manager';
 import type { Reference } from '@glimmer/reference';
-import { createConstRef, valueForRef } from '@glimmer/reference';
+import { UNDEFINED_REFERENCE, valueForRef } from '@glimmer/reference';
 import { EMPTY_ARGS } from '@glimmer/runtime';
 import { unwrapTemplate } from '@glimmer/util';
 
@@ -33,19 +31,18 @@ function instrumentationPayload(def: OutletDefinitionState) {
 }
 
 interface OutletInstanceState {
-  self: Reference;
-  outletBucket?: {};
-  engineBucket?: { mountPoint: string };
-  engine?: EngineInstance;
+  engine?: {
+    instance: EngineInstance;
+    mountPoint: string;
+  };
   finalize: () => void;
 }
 
 export interface OutletDefinitionState {
   ref: Reference<OutletState | undefined>;
   name: string;
-  template: Template;
+  template: object;
   controller: unknown;
-  model: unknown;
 }
 
 const CAPABILITIES: InternalComponentCapabilities = {
@@ -64,9 +61,11 @@ const CAPABILITIES: InternalComponentCapabilities = {
   hasSubOwner: false,
 };
 
+const CAPABILITIES_MASK = capabilityFlagsFrom(CAPABILITIES);
+
 class OutletComponentManager
   implements
-    WithCreateInstance<OutletInstanceState>,
+    WithCreateInstance<OutletInstanceState, OutletDefinitionState>,
     WithCustomDebugRenderTree<OutletInstanceState, OutletDefinitionState>
 {
   create(
@@ -79,19 +78,21 @@ class OutletComponentManager
     let parentStateRef = dynamicScope.get('outletState');
     let currentStateRef = definition.ref;
 
+    // This is the actual primary responsibility of the outlet component –
+    // it represents the switching from one route component/template into
+    // the next. The rest only exists to support the debug render tree and
+    // the old-school (and unreliable) instrumentation.
     dynamicScope.set('outletState', currentStateRef);
 
     let state: OutletInstanceState = {
-      self: createConstRef(definition.controller, 'this'),
       finalize: _instrumentStart('render.outlet', instrumentationPayload, definition),
     };
 
     if (env.debugRenderTree !== undefined) {
-      state.outletBucket = {};
-
       let parentState = valueForRef(parentStateRef);
-      let parentOwner = parentState && parentState.render && parentState.render.owner;
-      let currentOwner = valueForRef(currentStateRef)!.render!.owner;
+      let parentOwner = parentState?.render?.owner;
+      let currentState = valueForRef(currentStateRef);
+      let currentOwner = currentState?.render?.owner;
 
       if (parentOwner && parentOwner !== currentOwner) {
         assert(
@@ -99,12 +100,13 @@ class OutletComponentManager
           currentOwner instanceof EngineInstance
         );
 
-        let mountPoint = currentOwner.mountPoint;
-
-        state.engine = currentOwner;
+        let { mountPoint } = currentOwner;
 
         if (mountPoint) {
-          state.engineBucket = { mountPoint };
+          state.engine = {
+            mountPoint,
+            instance: currentOwner,
+          };
         }
       }
     }
@@ -112,21 +114,18 @@ class OutletComponentManager
     return state;
   }
 
-  getDebugName({ name }: OutletDefinitionState) {
-    return name;
+  getDebugName({ name }: OutletDefinitionState): string {
+    return `{{outlet}} for ${name}`;
   }
 
   getDebugCustomRenderTree(
-    definition: OutletDefinitionState,
-    state: OutletInstanceState,
-    args: CapturedArguments
+    _definition: OutletDefinitionState,
+    state: OutletInstanceState
   ): CustomRenderNode[] {
     let nodes: CustomRenderNode[] = [];
 
-    assert('[BUG] outletBucket must be set', state.outletBucket);
-
     nodes.push({
-      bucket: state.outletBucket,
+      bucket: state,
       type: 'outlet',
       // "main" used to be the outlet name, keeping it around for compatibility
       name: 'main',
@@ -135,26 +134,17 @@ class OutletComponentManager
       template: undefined,
     });
 
-    if (state.engineBucket) {
+    if (state.engine) {
       nodes.push({
-        bucket: state.engineBucket,
+        bucket: state.engine,
         type: 'engine',
-        name: state.engineBucket.mountPoint,
+        name: state.engine.mountPoint,
         args: EMPTY_ARGS,
-        instance: state.engine,
+        instance: state.engine.instance,
         template: undefined,
       });
     }
 
-    nodes.push({
-      bucket: state,
-      type: 'route-template',
-      name: definition.name,
-      args: args,
-      instance: definition.controller,
-      template: unwrapTemplate(definition.template).moduleName,
-    });
-
     return nodes;
   }
 
@@ -162,8 +152,8 @@ class OutletComponentManager
     return CAPABILITIES;
   }
 
-  getSelf({ self }: OutletInstanceState) {
-    return self;
+  getSelf() {
+    return UNDEFINED_REFERENCE;
   }
 
   didCreate() {}
@@ -182,30 +172,27 @@ class OutletComponentManager
 
 const OUTLET_MANAGER = new OutletComponentManager();
 
-export class OutletComponentDefinition
+const OUTLET_COMPONENT_TEMPLATE = precompileTemplate(
+  '<@Component @controller={{@controller}} @model={{@model}} />',
+  { strictMode: true }
+);
+
+export class OutletComponent
   implements
     ComponentDefinition<OutletDefinitionState, OutletInstanceState, OutletComponentManager>
 {
   // handle is not used by this custom definition
   public handle = -1;
-
-  public resolvedName: string;
+  public resolvedName = null;
+  public manager = OUTLET_MANAGER;
+  public capabilities = CAPABILITIES_MASK;
   public compilable: CompilableProgram;
-  public capabilities: CapabilityMask;
-
-  constructor(
-    public state: OutletDefinitionState,
-    public manager: OutletComponentManager = OUTLET_MANAGER
-  ) {
-    let capabilities = manager.getCapabilities();
-    this.capabilities = capabilityFlagsFrom(capabilities);
-    this.compilable = capabilities.wrapped
-      ? unwrapTemplate(state.template).asWrappedLayout()
-      : unwrapTemplate(state.template).asLayout();
-    this.resolvedName = state.name;
+
+  constructor(owner: InternalOwner, public state: OutletDefinitionState) {
+    this.compilable = unwrapTemplate(OUTLET_COMPONENT_TEMPLATE(owner)).asLayout();
   }
 }
 
-export function createRootOutlet(outletView: OutletView): OutletComponentDefinition {
-  return new OutletComponentDefinition(outletView.state);
+export function createRootOutlet(outletView: OutletView): OutletComponent {
+  return new OutletComponent(outletView.owner, outletView.state);
 }
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/route-template.ts b/packages/@ember/-internals/glimmer/lib/component-managers/route-template.ts
new file mode 100644
index 00000000000..4277f89323d
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/route-template.ts
@@ -0,0 +1,162 @@
+import type { InternalOwner } from '@ember/-internals/owner';
+import { _instrumentStart } from '@ember/instrumentation';
+import type {
+  CapturedArguments,
+  CompilableProgram,
+  ComponentDefinition,
+  CustomRenderNode,
+  Destroyable,
+  InternalComponentCapabilities,
+  Template,
+  VMArguments,
+  WithCreateInstance,
+  WithCustomDebugRenderTree,
+} from '@glimmer/interfaces';
+import type { Nullable } from '@ember/-internals/utility-types';
+import { DEBUG } from '@glimmer/env';
+import { capabilityFlagsFrom } from '@glimmer/manager';
+import type { Reference } from '@glimmer/reference';
+import { createDebugAliasRef, valueForRef } from '@glimmer/reference';
+import { curry, type CurriedValue } from '@glimmer/runtime';
+import { unwrapTemplate } from '@glimmer/util';
+import { CurriedType } from '@glimmer/vm';
+
+interface RouteTemplateInstanceState {
+  self: Reference;
+  controller: unknown;
+}
+
+export interface RouteTemplateDefinitionState {
+  name: string;
+  templateName: string;
+}
+
+const CAPABILITIES: InternalComponentCapabilities = {
+  dynamicLayout: false,
+  dynamicTag: false,
+  prepareArgs: false,
+  createArgs: true,
+  attributeHook: false,
+  elementHook: false,
+  createCaller: false,
+  dynamicScope: false,
+  updateHook: false,
+  createInstance: true,
+  wrapped: false,
+  willDestroy: false,
+  hasSubOwner: false,
+};
+
+const CAPABILITIES_MASK = capabilityFlagsFrom(CAPABILITIES);
+
+class RouteTemplateManager
+  implements
+    WithCreateInstance<RouteTemplateInstanceState, RouteTemplateDefinitionState>,
+    WithCustomDebugRenderTree<RouteTemplateInstanceState, RouteTemplateDefinitionState>
+{
+  create(
+    _owner: InternalOwner,
+    _definition: RouteTemplateDefinitionState,
+    args: VMArguments
+  ): RouteTemplateInstanceState {
+    let self = args.named.get('controller');
+
+    if (DEBUG) {
+      self = createDebugAliasRef!('this', self);
+    }
+
+    let controller = valueForRef(self);
+
+    return { self, controller };
+  }
+
+  getSelf({ self }: RouteTemplateInstanceState): Reference {
+    return self;
+  }
+
+  getDebugName({ name }: RouteTemplateDefinitionState) {
+    return `route-template (${name})`;
+  }
+
+  getDebugCustomRenderTree(
+    { name, templateName }: RouteTemplateDefinitionState,
+    state: RouteTemplateInstanceState,
+    args: CapturedArguments
+  ): CustomRenderNode[] {
+    return [
+      {
+        bucket: state,
+        type: 'route-template',
+        name,
+        args,
+        instance: state.controller,
+        template: templateName,
+      },
+    ];
+  }
+
+  getCapabilities(): InternalComponentCapabilities {
+    return CAPABILITIES;
+  }
+
+  didRenderLayout() {}
+  didUpdateLayout() {}
+
+  didCreate() {}
+  didUpdate() {}
+
+  getDestroyable(): Nullable<Destroyable> {
+    return null;
+  }
+}
+
+const ROUTE_TEMPLATE_MANAGER = new RouteTemplateManager();
+
+/**
+ * This "upgrades" a route template into a invocable component. Conceptually
+ * it can be 1:1 for each unique `Template`, but it's also cheap to construct,
+ * so unless the stability is desirable for other reasons, it's probably not
+ * worth caching this.
+ */
+export class RouteTemplate
+  implements
+    ComponentDefinition<
+      RouteTemplateDefinitionState,
+      RouteTemplateInstanceState,
+      RouteTemplateManager
+    >
+{
+  // handle is not used by this custom definition
+  public handle = -1;
+  public resolvedName: string;
+  public state: RouteTemplateDefinitionState;
+  public manager = ROUTE_TEMPLATE_MANAGER;
+  public capabilities = CAPABILITIES_MASK;
+  public compilable: CompilableProgram;
+
+  constructor(name: string, template: Template) {
+    let unwrapped = unwrapTemplate(template);
+    // TODO This actually seems inaccurate – it ultimately came from the
+    // outlet's name. Also, setting this overrides `getDebugName()` in that
+    // message. Is that desirable?
+    this.resolvedName = name;
+    this.state = { name, templateName: unwrapped.moduleName };
+    this.compilable = unwrapped.asLayout();
+  }
+}
+
+// TODO a lot these fields are copied from the adjacent existing components
+// implementation, haven't looked into who cares about `ComponentDefinition`
+// and if it is appropriate here. It seems like this version is intended to
+// be used with `curry` which probably isn't necessary here. It could be the
+// case that we just want to do something more similar to `InternalComponent`
+// (the one we used to implement `Input` and `LinkTo`). For now it follows
+// the same pattern to get things going.
+export function makeRouteTemplate(
+  owner: InternalOwner,
+  name: string,
+  template: Template
+): CurriedValue {
+  let routeTemplate = new RouteTemplate(name, template);
+  return curry(CurriedType.Component, routeTemplate, owner, null, true);
+}
diff --git a/packages/@ember/-internals/glimmer/lib/renderer.ts b/packages/@ember/-internals/glimmer/lib/renderer.ts
index 1c9c0e44469..2e64e171499 100644
--- a/packages/@ember/-internals/glimmer/lib/renderer.ts
+++ b/packages/@ember/-internals/glimmer/lib/renderer.ts
@@ -31,14 +31,16 @@ import { createConstRef, UNDEFINED_REFERENCE, valueForRef } from '@glimmer/refer
 import type { CurriedValue } from '@glimmer/runtime';
 import {
   clientBuilder,
+  createCapturedArgs,
   curry,
   DOMChanges,
   DOMTreeConstruction,
+  EMPTY_POSITIONAL,
   inTransaction,
   renderMain,
   runtimeContext,
 } from '@glimmer/runtime';
-import { unwrapTemplate } from '@glimmer/util';
+import { dict, unwrapTemplate } from '@glimmer/util';
 import { CURRENT_TAG, validateTag, valueForTag } from '@glimmer/validator';
 import type { SimpleDocument, SimpleElement, SimpleNode } from '@simple-dom/interface';
 import RSVP from 'rsvp';
@@ -51,6 +53,7 @@ import { EmberEnvironmentDelegate } from './environment';
 import ResolverImpl from './resolver';
 import type { OutletState } from './utils/outlet';
 import OutletView from './views/outlet';
+import { makeRouteTemplate } from './component-managers/route-template';
 
 export type IBuilder = (env: Environment, cursor: Cursor) => ElementBuilder;
 
@@ -370,10 +373,37 @@ export class Renderer {
   // renderer HOOKS
 
   appendOutletView(view: OutletView, target: SimpleElement): void {
-    let definition = createRootOutlet(view);
+    // TODO: This bypasses the {{outlet}} syntax so logically duplicates
+    // some of the set up code. Since this is all internal (or is it?),
+    // we can refactor this to do something more direct/less convoluted
+    // and with less setup, but get it working first
+    let outlet = createRootOutlet(view);
+    let { name, /* controller, */ template } = view.state;
+
+    let named = dict<Reference>();
+
+    named['Component'] = createConstRef(
+      makeRouteTemplate(view.owner, name, template as Template),
+      '@Component'
+    );
+
+    // TODO: is this guaranteed to be undefined? It seems to be the
+    // case in the `OutletView` class. Investigate how much that class
+    // exists as an internal implementation detail only, or if it was
+    // used outside of core. As far as I can tell, test-helpers uses
+    // it but only for `setOutletState`.
+    // named['controller'] = createConstRef(controller, '@controller');
+    // Update: at least according to the debug render tree tests, we
+    // appear to always expect this to be undefined. Not a definitive
+    // source by any means, but is useful evidence
+    named['controller'] = UNDEFINED_REFERENCE;
+    named['model'] = UNDEFINED_REFERENCE;
+
+    let args = createCapturedArgs(named, EMPTY_POSITIONAL);
+
     this._appendDefinition(
       view,
-      curry(CurriedType.Component, definition, view.owner, null, true),
+      curry(CurriedType.Component, outlet, view.owner, args, true),
       target
     );
   }
diff --git a/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts b/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts
index debf7a97eb9..bbaedf026c1 100644
--- a/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts
@@ -1,20 +1,22 @@
 import type { InternalOwner } from '@ember/-internals/owner';
 import { assert } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
-import type { CapturedArguments, DynamicScope } from '@glimmer/interfaces';
+import type { CapturedArguments, DynamicScope, Template } from '@glimmer/interfaces';
 import { CurriedType } from '@glimmer/vm';
 import type { Reference } from '@glimmer/reference';
 import {
   childRefFromParts,
   createComputeRef,
+  createConstRef,
   createDebugAliasRef,
   valueForRef,
 } from '@glimmer/reference';
 import type { CurriedValue } from '@glimmer/runtime';
 import { createCapturedArgs, curry, EMPTY_POSITIONAL } from '@glimmer/runtime';
 import { dict } from '@glimmer/util';
-import type { OutletDefinitionState } from '../component-managers/outlet';
-import { OutletComponentDefinition } from '../component-managers/outlet';
+import { hasInternalComponentManager } from '@glimmer/manager';
+import { OutletComponent, type OutletDefinitionState } from '../component-managers/outlet';
+import { makeRouteTemplate } from '../component-managers/route-template';
 import { internalHelper } from '../helpers/internal-helper';
 import type { OutletState } from '../utils/outlet';
 
@@ -56,18 +58,87 @@ export const outletHelper = internalHelper(
     });
 
     let lastState: OutletDefinitionState | null = null;
-    let definition: CurriedValue | null = null;
+    let outlet: CurriedValue | null = null;
 
     return createComputeRef(() => {
       let outletState = valueForRef(outletRef);
       let state = stateFor(outletRef, outletState);
 
-      if (!validate(state, lastState)) {
+      // This code is deliberately using the behavior in glimmer-vm where in
+      // <@Component />, the component is considered stabled via `===`, and
+      // will continue to re-render in-place as long as the `===` holds, but
+      // when it changes to a different object, it teardown the old component
+      // (running destructors, etc), and render the component in its place (or
+      // nothing if the new value is nullish. Here we are carefully exploiting
+      // that fact, and returns the same stable object so long as it is the
+      // same route, but return a different one when the route changes. On the
+      // other hand, changing the model only intentionally do not teardown the
+      // component and instead re-render in-place.
+      if (!isStable(state, lastState)) {
         lastState = state;
 
         if (state !== null) {
+          // If we are crossing an engine mount point, this is how the owner
+          // gets switched.
+          let outletOwner = outletState?.render?.owner ?? owner;
+
           let named = dict<Reference>();
 
+          // Here we either have a raw template that needs to be normalized,
+          // or a component that we can render as-is. `RouteTemplate` upgrades
+          // the template into a component so we can have a unified code path.
+          // We still store the original `template` value, because we rely on
+          // its identity for the stability check, and the `RouteTemplate`
+          // wrapper doesn't dedup for us.
+          let template = state.template;
+          let component: object;
+
+          if (hasInternalComponentManager(template)) {
+            component = template;
+          } else {
+            if (DEBUG) {
+              // We don't appear to have a standard way or a brand to check, but for the
+              // purpose of avoiding obvious user errors, this probably gets you close
+              // enough.
+              let isTemplate = (template: unknown): template is Template => {
+                if (template === null || typeof template !== 'object') {
+                  return false;
+                } else {
+                  let t = template as Partial<Template>;
+                  return t.result === 'ok' || t.result === 'error';
+                }
+              };
+
+              // We made it past the `TemplateFactory` instantiation before
+              // getting here, so either we got unlucky where the invalid type
+              // happens to be a function that didn't mind taking owner as an
+              // argument, or this was directly set by something like test
+              // helpers.
+              if (!isTemplate(template)) {
+                let label: string;
+
+                try {
+                  label = `\`${String(template)}\``;
+                } catch {
+                  label = 'an unknown object';
+                }
+
+                assert(
+                  `Failed to render the \`${state.name}\` route: expected ` +
+                    `a component or Template object, but got ${label}.`
+                );
+              }
+            }
+
+            component = makeRouteTemplate(outletOwner, state.name, template as Template);
+          }
+
+          // Component is stable for the lifetime of the outlet
+          named['Component'] = createConstRef(component, '@Component');
+
+          // Controller is stable for the lifetime of the outlet
+          named['controller'] = createConstRef(state.controller, '@controller');
+
           // Create a ref for the model
           let modelRef = childRefFromParts(outletRef, ['render', 'model']);
 
@@ -93,19 +164,21 @@ export const outletHelper = internalHelper(
           }
 
           let args = createCapturedArgs(named, EMPTY_POSITIONAL);
-          definition = curry(
+
+          // Package up everything
+          outlet = curry(
             CurriedType.Component,
-            new OutletComponentDefinition(state),
-            outletState?.render?.owner ?? owner,
+            new OutletComponent(owner, state),
+            outletOwner,
             args,
             true
           );
         } else {
-          definition = null;
+          outlet = null;
         }
       }
 
-      return definition;
+      return outlet;
     });
   }
 );
@@ -118,23 +191,26 @@ function stateFor(
   let render = outlet.render;
   if (render === undefined) return null;
   let template = render.template;
-  if (template === undefined) return null;
+  // The type doesn't actually allow for `null`, but if we make it past this
+  // point it is really important that we have _something_ to render. We could
+  // assert, but that is probably overly strict for very little to gain.
+  if (template === undefined || template === null) return null;
 
   return {
     ref,
     name: render.name,
     template,
     controller: render.controller,
-    model: render.model,
   };
 }
 
-function validate(state: OutletDefinitionState | null, lastState: OutletDefinitionState | null) {
-  if (state === null) {
-    return lastState === null;
-  }
-  if (lastState === null) {
+function isStable(
+  state: OutletDefinitionState | null,
+  lastState: OutletDefinitionState | null
+): boolean {
+  if (state === null || lastState === null) {
     return false;
   }
+
   return state.template === lastState.template && state.controller === lastState.controller;
 }
diff --git a/packages/@ember/-internals/glimmer/lib/utils/outlet.ts b/packages/@ember/-internals/glimmer/lib/utils/outlet.ts
index 741c4a20fd7..61cb1ead256 100644
--- a/packages/@ember/-internals/glimmer/lib/utils/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/utils/outlet.ts
@@ -25,9 +25,10 @@ export interface RenderState {
   model: unknown;
 
   /**
-   * The template (the route template to use in the {{outlet}})
+   * The route's template – this is either a Template or a component, and it
+   * gets normalized during the render process.
    */
-  template: Template | undefined;
+  template: Template | object | undefined;
 }
 
 export interface OutletState {
diff --git a/packages/@ember/-internals/glimmer/lib/views/outlet.ts b/packages/@ember/-internals/glimmer/lib/views/outlet.ts
index dc97e2b6276..7cc9be26e73 100644
--- a/packages/@ember/-internals/glimmer/lib/views/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/views/outlet.ts
@@ -90,7 +90,6 @@ export default class OutletView {
       name: TOP_LEVEL_NAME,
       template,
       controller: undefined,
-      model: undefined,
     };
   }
 
diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
index a9b2becaaff..fb3a796bb17 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
+++ b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
@@ -89,7 +89,10 @@ if (ENV._DEBUG_RENDER_TREE) {
           this.outlet({
             type: 'route-template',
             name: 'index',
-            args: { positional: [], named: { model: undefined } },
+            args: {
+              positional: [],
+              named: { controller: this.controllerFor('index'), model: undefined },
+            },
             instance: this.controllerFor('index'),
             template: 'my-app/templates/index.hbs',
             bounds: this.elementBounds(this.element!),
@@ -103,7 +106,10 @@ if (ENV._DEBUG_RENDER_TREE) {
           this.outlet({
             type: 'route-template',
             name: 'foo',
-            args: { positional: [], named: { model: undefined } },
+            args: {
+              positional: [],
+              named: { controller: this.controllerFor('foo'), model: undefined },
+            },
             instance: this.controllerFor('foo'),
             template: 'my-app/templates/foo.hbs',
             bounds: this.elementBounds(this.element!),
@@ -111,7 +117,10 @@ if (ENV._DEBUG_RENDER_TREE) {
               this.outlet({
                 type: 'route-template',
                 name: 'foo.index',
-                args: { positional: [], named: { model: undefined } },
+                args: {
+                  positional: [],
+                  named: { controller: this.controllerFor('foo.index'), model: undefined },
+                },
                 instance: this.controllerFor('foo.index'),
                 template: 'my-app/templates/foo/index.hbs',
                 bounds: this.nodeBounds(this.element!.lastChild),
@@ -127,7 +136,10 @@ if (ENV._DEBUG_RENDER_TREE) {
           this.outlet({
             type: 'route-template',
             name: 'foo',
-            args: { positional: [], named: { model: undefined } },
+            args: {
+              positional: [],
+              named: { controller: this.controllerFor('foo'), model: undefined },
+            },
             instance: this.controllerFor('foo'),
             template: 'my-app/templates/foo.hbs',
             bounds: this.elementBounds(this.element!),
@@ -135,7 +147,10 @@ if (ENV._DEBUG_RENDER_TREE) {
               this.outlet({
                 type: 'route-template',
                 name: 'foo.inner',
-                args: { positional: [], named: { model: 'wow' } },
+                args: {
+                  positional: [],
+                  named: { controller: this.controllerFor('foo.inner'), model: 'wow' },
+                },
                 instance: this.controllerFor('foo.inner'),
                 template: 'my-app/templates/foo/inner.hbs',
                 bounds: this.nodeBounds(this.element!.lastChild),
@@ -151,7 +166,10 @@ if (ENV._DEBUG_RENDER_TREE) {
           this.outlet({
             type: 'route-template',
             name: 'foo',
-            args: { positional: [], named: { model: undefined } },
+            args: {
+              positional: [],
+              named: { controller: this.controllerFor('foo'), model: undefined },
+            },
             instance: this.controllerFor('foo'),
             template: 'my-app/templates/foo.hbs',
             bounds: this.elementBounds(this.element!),
@@ -159,7 +177,10 @@ if (ENV._DEBUG_RENDER_TREE) {
               this.outlet({
                 type: 'route-template',
                 name: 'foo.inner',
-                args: { positional: [], named: { model: 'zomg' } },
+                args: {
+                  positional: [],
+                  named: { controller: this.controllerFor('foo.inner'), model: 'zomg' },
+                },
                 instance: this.controllerFor('foo.inner'),
                 template: 'my-app/templates/foo/inner.hbs',
                 bounds: this.nodeBounds(this.element!.lastChild),
@@ -643,7 +664,10 @@ if (ENV._DEBUG_RENDER_TREE) {
           this.outlet({
             type: 'route-template',
             name: 'index',
-            args: { positional: [], named: { model: undefined } },
+            args: {
+              positional: [],
+              named: { controller: this.controllerFor('index'), model: undefined },
+            },
             instance: this.controllerFor('index'),
             template: 'my-app/templates/index.hbs',
             bounds: this.elementBounds(this.element!),
@@ -665,7 +689,13 @@ if (ENV._DEBUG_RENDER_TREE) {
               {
                 type: 'route-template',
                 name: 'application',
-                args: { positional: [], named: { model: undefined } },
+                args: {
+                  positional: [],
+                  named: {
+                    controller: instance!.lookup('controller:application'),
+                    model: undefined,
+                  },
+                },
                 instance: instance!.lookup('controller:application'),
                 template: 'foo/templates/application.hbs',
                 bounds: this.elementBounds(this.element!),
@@ -673,7 +703,10 @@ if (ENV._DEBUG_RENDER_TREE) {
                   this.outlet({
                     type: 'route-template',
                     name: 'index',
-                    args: { positional: [], named: { model: undefined } },
+                    args: {
+                      positional: [],
+                      named: { controller: instance!.lookup('controller:index'), model: undefined },
+                    },
                     instance: instance!.lookup('controller:index'),
                     template: 'foo/templates/index.hbs',
                     bounds: this.nodeBounds(this.element!.firstChild),
@@ -703,7 +736,13 @@ if (ENV._DEBUG_RENDER_TREE) {
               {
                 type: 'route-template',
                 name: 'application',
-                args: { positional: [], named: { model: undefined } },
+                args: {
+                  positional: [],
+                  named: {
+                    controller: instance!.lookup('controller:application'),
+                    model: undefined,
+                  },
+                },
                 instance: instance!.lookup('controller:application'),
                 template: 'foo/templates/application.hbs',
                 bounds: this.elementBounds(this.element!),
@@ -711,7 +750,10 @@ if (ENV._DEBUG_RENDER_TREE) {
                   this.outlet({
                     type: 'route-template',
                     name: 'index',
-                    args: { positional: [], named: { model: undefined } },
+                    args: {
+                      positional: [],
+                      named: { controller: instance!.lookup('controller:index'), model: undefined },
+                    },
                     instance: instance!.lookup('controller:index'),
                     template: 'foo/templates/index.hbs',
                     bounds: this.nodeBounds(this.element!.firstChild),
@@ -750,7 +792,13 @@ if (ENV._DEBUG_RENDER_TREE) {
               {
                 type: 'route-template',
                 name: 'application',
-                args: { positional: [], named: { model: undefined } },
+                args: {
+                  positional: [],
+                  named: {
+                    controller: instance!.lookup('controller:application'),
+                    model: undefined,
+                  },
+                },
                 instance: instance!.lookup('controller:application'),
                 template: 'foo/templates/application.hbs',
                 bounds: this.elementBounds(this.element!),
@@ -758,7 +806,10 @@ if (ENV._DEBUG_RENDER_TREE) {
                   this.outlet({
                     type: 'route-template',
                     name: 'index',
-                    args: { positional: [], named: { model: undefined } },
+                    args: {
+                      positional: [],
+                      named: { controller: instance!.lookup('controller:index'), model: undefined },
+                    },
                     instance: instance!.lookup('controller:index'),
                     template: 'foo/templates/index.hbs',
                     bounds: this.nodeBounds(this.element!.firstChild),
@@ -776,7 +827,10 @@ if (ENV._DEBUG_RENDER_TREE) {
           this.outlet({
             type: 'route-template',
             name: 'index',
-            args: { positional: [], named: { model: undefined } },
+            args: {
+              positional: [],
+              named: { controller: this.controllerFor('index'), model: undefined },
+            },
             instance: this.controllerFor('index'),
             template: 'my-app/templates/index.hbs',
             bounds: this.elementBounds(this.element!),
@@ -1627,11 +1681,12 @@ if (ENV._DEBUG_RENDER_TREE) {
       assertRenderTree(expected: ExpectedRenderNode[]): void {
         let outlet = 'packages/@ember/-internals/glimmer/lib/templates/outlet.hbs';
         let actual = captureRenderTree(this.owner);
+        let controller = this.controllerFor('application');
         let wrapped: ExpectedRenderNode[] = [
           this.outlet({
             type: 'route-template',
             name: '-top-level',
-            args: { positional: [], named: {} },
+            args: { positional: [], named: { controller: undefined, model: undefined } },
             instance: undefined,
             template: outlet,
             bounds: this.elementBounds(this.element!),
@@ -1639,8 +1694,8 @@ if (ENV._DEBUG_RENDER_TREE) {
               this.outlet({
                 type: 'route-template',
                 name: 'application',
-                args: { positional: [], named: { model: undefined } },
-                instance: this.controllerFor('application'),
+                args: { positional: [], named: { controller, model: undefined } },
+                instance: controller,
                 template: this.owner.hasRegistration('template:application')
                   ? 'my-app/templates/application.hbs'
                   : outlet,
diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js b/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
index 83028cc0c6e..34afa4cfa67 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js
@@ -8,6 +8,7 @@ import { tracked } from '@ember/-internals/metal';
 import { set } from '@ember/object';
 import { backtrackingMessageFor } from '../../utils/debug-stack';
 import { runTask } from '../../../../../../internal-test-helpers/lib/run';
+import { template } from '@ember/template-compiler';
 
 moduleFor(
   'Application test: rendering',
@@ -513,7 +514,14 @@ moduleFor(
       this.addTemplate('routeWithError', 'Hi {{@model.name}} <Foo @person={{@model}} />');
 
       let expectedBacktrackingMessage = backtrackingMessageFor('name', 'Person \\(Ben\\)', {
-        renderTree: ['application', 'routeWithError', '@model.name'],
+        includeTopLevel: 'outlet',
+        renderTree: [
+          '{{outlet}} for application',
+          'application',
+          '{{outlet}} for routeWithError',
+          'routeWithError',
+          '@model.name',
+        ],
       });
 
       await this.visit('/');
@@ -553,5 +561,88 @@ moduleFor(
           this.assertText('first');
         });
     }
+
+    async ['@test it can use a component as the route template'](assert) {
+      this.router.map(function () {
+        this.route('example');
+      });
+
+      this.add(
+        'route:example',
+        Route.extend({
+          model() {
+            return {
+              message: 'I am the model',
+            };
+          },
+        })
+      );
+
+      this.add(
+        'controller:example',
+        class extends Controller {
+          message = 'I am the controller';
+        }
+      );
+
+      this.add(
+        'template:example',
+        class extends Component {
+          message = 'I am the component';
+
+          static {
+            template(
+              `<div data-test="model">{{@model.message}}</div>
+               <div data-test="controller">{{@controller.message}}</div>
+               <div data-test="component">{{this.message}}</div>`,
+              {
+                component: this,
+              }
+            );
+          }
+        }
+      );
+
+      await this.visit('/example');
+
+      assert.strictEqual(this.$('[data-test="model"]').nodes[0]?.innerText, 'I am the model');
+      assert.strictEqual(
+        this.$('[data-test="controller"]').nodes[0]?.innerText,
+        'I am the controller'
+      );
+      assert.strictEqual(
+        this.$('[data-test="component"]').nodes[0]?.innerText,
+        'I am the component'
+      );
+    }
+
+    async ['@test can switch between component-defined routes']() {
+      this.router.map(function () {
+        this.route('first');
+        this.route('second');
+      });
+      this.add('template:first', template('First'));
+      this.add('template:second', template('Second'));
+      await this.visit('/first');
+      this.assertText('First');
+      await this.visit('/second');
+      this.assertText('Second');
+    }
+
+    async ['@test can switch from component-defined route to template-defined route']() {
+      this.router.map(function () {
+        this.route('first');
+        this.route('second');
+      });
+      this.add('template:first', template('First'));
+      this.addTemplate(
+        'second',
+        'Second sees {{#if @component}}A Component{{else}}No Component{{/if}}'
+      );
+      await this.visit('/first');
+      this.assertText('First');
+      await this.visit('/second');
+      this.assertText('Second sees No Component');
+    }
   }
 );
diff --git a/packages/@ember/-internals/glimmer/tests/integration/mount-test.js b/packages/@ember/-internals/glimmer/tests/integration/mount-test.js
index e40bd54483f..863e2b67ed0 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/mount-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/mount-test.js
@@ -161,7 +161,15 @@ moduleFor(
         ComponentWithBacktrackingSet;
 
       let expectedBacktrackingMessage = backtrackingMessageFor('name', 'Person \\(Ben\\)', {
-        renderTree: ['application', 'route-with-mount', 'chat', 'this.person.name'],
+        includeTopLevel: 'outlet',
+        renderTree: [
+          '{{outlet}} for application',
+          'application',
+          '{{outlet}} for route-with-mount',
+          'route-with-mount',
+          'chat',
+          'this.person.name',
+        ],
       });
 
       await this.visit('/');
diff --git a/packages/@ember/-internals/glimmer/tests/utils/debug-stack.js b/packages/@ember/-internals/glimmer/tests/utils/debug-stack.js
index 8ac48d0d7f7..44bc82c43e7 100644
--- a/packages/@ember/-internals/glimmer/tests/utils/debug-stack.js
+++ b/packages/@ember/-internals/glimmer/tests/utils/debug-stack.js
@@ -1,5 +1,11 @@
 function debugStackMessage(message, renderTree, includeTopLevel) {
-  let topLevel = includeTopLevel ? '-top-level\n {4}' : '';
+  let topLevel = '';
+
+  if (includeTopLevel === 'outlet') {
+    topLevel = '{{outlet}} for -top-level\n {4}-top-level\n {6}';
+  } else if (includeTopLevel) {
+    topLevel = '-top-level\n {4}';
+  }
 
   return `${message}[\\S\\s]*- While rendering:\n {2}${topLevel}${renderTree.join('\\n\\s*')}`;
 }
diff --git a/packages/@ember/routing/route.ts b/packages/@ember/routing/route.ts
index cfab81cfe5a..618b7cea1bb 100644
--- a/packages/@ember/routing/route.ts
+++ b/packages/@ember/routing/route.ts
@@ -24,6 +24,7 @@ import EngineInstance from '@ember/engine/instance';
 import { dependentKeyCompat } from '@ember/object/compat';
 import { once } from '@ember/runloop';
 import { DEBUG } from '@glimmer/env';
+import { hasInternalComponentManager } from '@glimmer/manager';
 import type { RenderState } from '@ember/-internals/glimmer';
 import type { TemplateFactory } from '@glimmer/interfaces';
 import type { InternalRouteInfo, Route as IRoute, Transition, TransitionState } from 'router_js';
@@ -1836,21 +1837,73 @@ function buildRenderState(route: Route): RenderState {
 
   let model = route.currentModel;
 
-  let template = owner.lookup(`template:${route.templateName || name}`) as
+  let templateFactoryOrComponent = owner.lookup(`template:${route.templateName || name}`) as
     | TemplateFactory
+    | object // This is meant to be a component
     | undefined;
 
+  // Now we support either a component or a template to be returned by this
+  // resolver call, but if it's a `TemplateFactory`, we need to instantiate
+  // it into a `Template`, since that's what `RenderState` wants. We can't
+  // easily change it, it's intimate API used by @ember/test-helpers and the
+  // like. We could compatibly allow `Template` | `TemplateFactory`, and that's
+  // what it used to do but we _just_ went through deprecations to get that
+  // removed. It's also not ideal since once you mix the two types, they are
+  // not exactly easy to tell apart.
+  //
+  // It may also be tempting to just normalize `Template` into `RouteTemplate`
+  // here, and we could. However, this is not the only entrypoint where this
+  // `RenderState` is made – @ember/test-helpers punches through an impressive
+  // amount of private API to set it directly, and this feature would also be
+  // useful for them. So, even if we had normalized here, we'd still have to
+  // check and do that again during render anyway.
+  let template: object;
+
+  if (templateFactoryOrComponent) {
+    if (hasInternalComponentManager(templateFactoryOrComponent)) {
+      template = templateFactoryOrComponent;
+    } else {
+      if (DEBUG && typeof templateFactoryOrComponent !== 'function') {
+        let label: string;
+
+        try {
+          label = `\`${String(templateFactoryOrComponent)}\``;
+        } catch {
+          label = 'an unknown object';
+        }
+
+        assert(
+          `Failed to render the ${name} route, expected ` +
+            `\`template:${route.templateName || name}\` to resolve into ` +
+            `a component or a \`TemplateFactory\`, got: ${label}. ` +
+            `Most likely an improperly defined class or an invalid module export.`
+        );
+      }
+
+      template = (templateFactoryOrComponent as TemplateFactory)(owner);
+    }
+  } else {
+    // default `{{outlet}}`
+    template = route._topLevelViewTemplate(owner);
+  }
+
   let render: RenderState = {
     owner,
     name,
     controller,
     model,
-    template: template?.(owner) ?? route._topLevelViewTemplate(owner),
+    template,
   };
 
   if (DEBUG) {
     let LOG_VIEW_LOOKUPS = get(route._router, 'namespace.LOG_VIEW_LOOKUPS');
-    if (LOG_VIEW_LOOKUPS && !template) {
+    // This is covered by tests and the existing code was deliberately
+    // targeting the value prior to normalization, but is this message actually
+    // accurate? It seems like we will always default the `{{outlet}}` template
+    // so I'm not sure about "Nothing will be rendered?" (who consumes these
+    // logs anyway? as lookups happen more infrequently now I doubt this is all
+    // that useful)
+    if (LOG_VIEW_LOOKUPS && !templateFactoryOrComponent) {
       info(`Could not find "${name}" template. Nothing will be rendered`, {
         fullName: `template:${name}`,
       });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a05ec48595..928b9d65ae5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1717,15 +1717,12 @@ importers:
       '@ember/test-helpers':
         specifier: ^3.3.0
         version: 3.3.0(ember-source@)(webpack@5.91.0)
-      '@ember/test-waiters':
-        specifier: ^3.1.0
-        version: 3.1.0
       '@embroider/test-setup':
         specifier: ^4.0.0
         version: 4.0.0
       '@glimmer/component':
-        specifier: workspace:^
-        version: link:../../packages/@glimmer/component
+        specifier: ^1.1.2
+        version: 1.1.2(@babel/core@7.24.4)
       '@glimmer/tracking':
         specifier: ^1.1.2
         version: 1.1.2
@@ -1777,6 +1774,9 @@ importers:
       ember-source:
         specifier: workspace:*
         version: link:../..
+      ember-template-imports:
+        specifier: ^4.1.2
+        version: 4.2.0
       ember-template-lint:
         specifier: ^6.0.0
         version: 6.0.0
@@ -3660,6 +3660,19 @@ packages:
       '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.24.4)
     dev: true
 
+  /@babel/plugin-transform-typescript@7.5.5(@babel/core@7.24.4):
+    resolution: {integrity: sha512-pehKf4m640myZu5B2ZviLaiBlxMCjSZ1qTEO459AXKX5GnPueyulJeCqZFs1nz/Ya2dDzXQ1NxZ/kKNWyD4h6w==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.4(supports-color@8.1.1)
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.24.4)
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.24.4)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.24.4):
     resolution: {integrity: sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==}
     engines: {node: '>=6.9.0'}
@@ -4869,6 +4882,29 @@ packages:
       '@glimmer/wire-format': 0.92.3
     dev: false
 
+  /@glimmer/component@1.1.2(@babel/core@7.24.4):
+    resolution: {integrity: sha512-XyAsEEa4kWOPy+gIdMjJ8XlzA3qrGH55ZDv6nA16ibalCR17k74BI0CztxuRds+Rm6CtbUVgheCVlcCULuqD7A==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+    dependencies:
+      '@glimmer/di': 0.1.11
+      '@glimmer/env': 0.1.7
+      '@glimmer/util': 0.44.0
+      broccoli-file-creator: 2.1.1
+      broccoli-merge-trees: 3.0.2
+      ember-cli-babel: 7.26.11
+      ember-cli-get-component-path-option: 1.0.0
+      ember-cli-is-package-missing: 1.0.0
+      ember-cli-normalize-entity-name: 1.0.0
+      ember-cli-path-utils: 1.0.0
+      ember-cli-string-utils: 1.1.0
+      ember-cli-typescript: 3.0.0(@babel/core@7.24.4)
+      ember-cli-version-checker: 3.1.3
+      ember-compatibility-helpers: 1.2.7(@babel/core@7.24.4)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+    dev: true
+
   /@glimmer/debug@0.92.4:
     resolution: {integrity: sha512-waTBOdtp92MC3h/51mYbc4GRumO+Tsa5jbXLoewqALjE1S8bMu9qgkG7Cx635x3/XpjsD9xceMqagBvYhuI6tA==}
     dependencies:
@@ -4886,6 +4922,10 @@ packages:
       '@glimmer/util': 0.92.3
     dev: false
 
+  /@glimmer/di@0.1.11:
+    resolution: {integrity: sha512-moRwafNDwHTnTHzyyZC9D+mUSvYrs1Ak0tRPjjmCghdoHHIvMshVbEnwKb/1WmW5CUlKc2eL9rlAV32n3GiItg==}
+    dev: true
+
   /@glimmer/encoder@0.92.3:
     resolution: {integrity: sha512-DJ8DB33LxODjzCWRrxozHUaRqVyZj4p8jDLG42aCNmWo3smxrsjshcaVUwDmib24DW+dzR7kMc39ObMqT5zK0w==}
     dependencies:
@@ -5052,6 +5092,10 @@ packages:
       '@glimmer/validator': 0.44.0
     dev: true
 
+  /@glimmer/util@0.44.0:
+    resolution: {integrity: sha512-duAsm30uVK9jSysElCbLyU6QQYO2X9iLDLBIBUcCqck9qN1o3tK2qWiHbGK5d6g8E2AJ4H88UrfElkyaJlGrwg==}
+    dev: true
+
   /@glimmer/util@0.84.3:
     resolution: {integrity: sha512-qFkh6s16ZSRuu2rfz3T4Wp0fylFj3HBsONGXQcrAdZjdUaIS6v3pNj6mecJ71qRgcym9Hbaq/7/fefIwECUiKw==}
     dependencies:
@@ -7465,6 +7509,9 @@ packages:
 
   /ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependenciesMeta:
+      ajv:
+        optional: true
     dependencies:
       ajv: 8.12.0
 
@@ -9714,6 +9761,10 @@ packages:
     resolution: {integrity: sha512-9guqKIx2H+78N17otBpl8yLZbQGL5q1vBO/jDb3gF2JjixtcVpC62jDUNxjVMNoaZ09oxRX84ZOD6VX02qkVvg==}
     dev: true
 
+  /content-tag@3.0.0:
+    resolution: {integrity: sha512-HxWPmF9hzehv5PV7TSK7QSzlVBhmwQA8NgBrXmL+fqXfM3L1r3ResAPzeiGbxra3Zw6U3gdhw3cIDJADQnuCVQ==}
+    dev: true
+
   /content-type@1.0.5:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
@@ -10577,7 +10628,6 @@ packages:
 
   /ember-cli-get-component-path-option@1.0.0:
     resolution: {integrity: sha512-k47TDwcJ2zPideBCZE8sCiShSxQSpebY2BHcX2DdipMmBox5gsfyVrbKJWIHeSTTKyEUgmBIvQkqTOozEziCZA==}
-    dev: false
 
   /ember-cli-htmlbars@6.3.0:
     resolution: {integrity: sha512-N9Y80oZfcfWLsqickMfRd9YByVcTGyhYRnYQ2XVPVrp6jyUyOeRWmEAPh7ERSXpp8Ws4hr/JB9QVQrn/yZa+Ag==}
@@ -10733,6 +10783,26 @@ packages:
       - supports-color
     dev: true
 
+  /ember-cli-typescript@3.0.0(@babel/core@7.24.4):
+    resolution: {integrity: sha512-lo5YArbJzJi5ssvaGqTt6+FnhTALnSvYVuxM7lfyL1UCMudyNJ94ovH5C7n5il7ATd6WsNiAPRUO/v+s5Jq/aA==}
+    engines: {node: 8.* || >= 10.*}
+    dependencies:
+      '@babel/plugin-transform-typescript': 7.5.5(@babel/core@7.24.4)
+      ansi-to-html: 0.6.15
+      debug: 4.3.7(supports-color@8.1.1)
+      ember-cli-babel-plugin-helpers: 1.1.1
+      execa: 2.1.0
+      fs-extra: 8.1.0
+      resolve: 1.22.8
+      rsvp: 4.8.5
+      semver: 6.3.1
+      stagehand: 1.0.1
+      walk-sync: 2.2.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+    dev: true
+
   /ember-cli-version-checker@3.1.3:
     resolution: {integrity: sha512-PZNSvpzwWgv68hcXxyjREpj3WWb81A7rtYNQq1lLEgrWIchF8ApKJjWP3NBpHjaatwILkZAV8klair5WFlXAKg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -11249,6 +11319,17 @@ packages:
       - supports-color
     dev: true
 
+  /ember-template-imports@4.2.0:
+    resolution: {integrity: sha512-qwf/38E1ut8M2/1tsFJl6kL99799MvxQrx0lN3LAc0HJRQhM/lYHqnHhzS30rkH76g+76TfxcMB5JJZQabWk2A==}
+    engines: {node: 16.* || >= 18}
+    dependencies:
+      broccoli-stew: 3.0.0
+      content-tag: 3.0.0
+      ember-cli-version-checker: 5.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /ember-template-lint@6.0.0:
     resolution: {integrity: sha512-TWWt/qCd4KoQ50T3We5nCoKcsrAT8Ip79Kmm9eyWjjyL+LAbRFu0z+GxcmW7MR+QCNW/1LQs3kwEdtIcaHEGiA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -12007,6 +12088,21 @@ packages:
       strip-eof: 1.0.0
     dev: true
 
+  /execa@2.1.0:
+    resolution: {integrity: sha512-Y/URAVapfbYy2Xp/gb6A0E7iR8xeqOCXsuuaoMn7A5PzrXUK84E1gyiEfq0wQd/GHA6GsoHWwhNq8anb0mleIw==}
+    engines: {node: ^8.12.0 || >=9.7.0}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 5.2.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 3.1.0
+      onetime: 5.1.2
+      p-finally: 2.0.1
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+    dev: true
+
   /execa@4.1.0:
     resolution: {integrity: sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==}
     engines: {node: '>=10'}
@@ -13217,7 +13313,7 @@ packages:
       function-bind: 1.1.2
 
   /hawk@1.1.1:
-    resolution: {integrity: sha1-h81JH5tG5OKurKM1QWdmiF0tHtk=}
+    resolution: {integrity: sha512-am8sVA2bCJIw8fuuVcKvmmNnGFUGW8spTkVtj2fXTEZVkfN42bwFZFtDem57eFi+NSxurJB8EQ7Jd3uCHLn8Vw==}
     engines: {node: '>=0.8.0'}
     deprecated: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
     requiresBuild: true
@@ -13365,7 +13461,7 @@ packages:
     dependencies:
       '@tootallnate/once': 1.1.2
       agent-base: 6.0.2(supports-color@8.1.1)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.7(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -13417,7 +13513,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2(supports-color@8.1.1)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.7(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -15323,6 +15419,13 @@ packages:
       path-key: 2.0.1
     dev: true
 
+  /npm-run-path@3.1.0:
+    resolution: {integrity: sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-key: 3.1.1
+    dev: true
+
   /npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -15566,6 +15669,11 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /p-finally@2.0.1:
+    resolution: {integrity: sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /p-is-promise@2.1.0:
     resolution: {integrity: sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==}
     engines: {node: '>=6'}
@@ -17412,7 +17520,7 @@ packages:
     resolution: {integrity: sha512-GqXBq2SPWv9hTXDFKS8WrKK1aISB0aKGHZzH+uD4ShAgs+Fz20ZfoerLOm8U+f62iRWLrw6nimOY/uYuTcVhvg==}
     engines: {node: 6.* || 8.* || >= 10.*}
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.7(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
diff --git a/smoke-tests/app-template/app/controllers/example-gjs-route.js b/smoke-tests/app-template/app/controllers/example-gjs-route.js
new file mode 100644
index 00000000000..53f9b672773
--- /dev/null
+++ b/smoke-tests/app-template/app/controllers/example-gjs-route.js
@@ -0,0 +1,5 @@
+import Controller from '@ember/controller';
+
+export default class extends Controller {
+  exampleControllerField = "This is on the controller";
+}
diff --git a/smoke-tests/app-template/app/router.js b/smoke-tests/app-template/app/router.js
index aeffbcc03fb..be579b24f13 100644
--- a/smoke-tests/app-template/app/router.js
+++ b/smoke-tests/app-template/app/router.js
@@ -6,4 +6,6 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function () {});
+Router.map(function () {
+  this.route('example-gjs-route')
+});
diff --git a/smoke-tests/app-template/app/routes/example-gjs-route.js b/smoke-tests/app-template/app/routes/example-gjs-route.js
new file mode 100644
index 00000000000..4b17a95d1db
--- /dev/null
+++ b/smoke-tests/app-template/app/routes/example-gjs-route.js
@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+export default class extends Route {
+  model() {
+    return {
+      message: "I am the model"
+    }
+  }
+}
diff --git a/smoke-tests/app-template/app/templates/application.hbs b/smoke-tests/app-template/app/templates/application.hbs
index b0522933205..e16882a4082 100644
--- a/smoke-tests/app-template/app/templates/application.hbs
+++ b/smoke-tests/app-template/app/templates/application.hbs
@@ -1,7 +1,4 @@
 {{page-title "EmberTestApp"}}
 
-{{!-- The following component displays Ember's default welcome message. --}}
-<WelcomePage />
-{{!-- Feel free to remove this! --}}
+{{outlet}}
 
-{{outlet}}
\ No newline at end of file
diff --git a/smoke-tests/app-template/app/templates/example-gjs-route.gjs b/smoke-tests/app-template/app/templates/example-gjs-route.gjs
new file mode 100644
index 00000000000..aee4a044f33
--- /dev/null
+++ b/smoke-tests/app-template/app/templates/example-gjs-route.gjs
@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+
+export default class extends Component {
+  get componentGetter() {
+    return "I am on the component"
+  }
+
+  <template>
+    <div data-test="model-field">{{@model.message}}</div>
+    <div data-test="controller-field">{{@controller.exampleControllerField}}</div>
+    <div data-test="component-getter">{{this.componentGetter}}</div>
+  </template>
+}
diff --git a/smoke-tests/app-template/app/templates/index.hbs b/smoke-tests/app-template/app/templates/index.hbs
new file mode 100644
index 00000000000..2017d4b9197
--- /dev/null
+++ b/smoke-tests/app-template/app/templates/index.hbs
@@ -0,0 +1,4 @@
+{{!-- The following component displays Ember's default welcome message. --}}
+<WelcomePage />
+{{!-- Feel free to remove this! --}}
+
diff --git a/smoke-tests/app-template/package.json b/smoke-tests/app-template/package.json
index 1fb0c2a949d..0ac9218aa12 100644
--- a/smoke-tests/app-template/package.json
+++ b/smoke-tests/app-template/package.json
@@ -27,9 +27,8 @@
     "@ember/optional-features": "^2.0.0",
     "@ember/string": "^3.0.1",
     "@ember/test-helpers": "^3.3.0",
-    "@ember/test-waiters": "^3.1.0",
     "@embroider/test-setup": "^4.0.0",
-    "@glimmer/component": "workspace:^",
+    "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^2.4.3",
@@ -47,6 +46,7 @@
     "ember-qunit": "^8.0.2",
     "ember-resolver": "^11.0.1",
     "ember-source": "workspace:*",
+    "ember-template-imports": "^4.1.2",
     "ember-template-lint": "^6.0.0",
     "ember-welcome-page": "^7.0.2",
     "eslint": "^8.0.0",
diff --git a/smoke-tests/app-template/tests/acceptance/example-gjs-route-test.js b/smoke-tests/app-template/tests/acceptance/example-gjs-route-test.js
new file mode 100644
index 00000000000..ce7ffbc6b6e
--- /dev/null
+++ b/smoke-tests/app-template/tests/acceptance/example-gjs-route-test.js
@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-test-app/tests/helpers';
+
+module('Acceptance | example gjs route', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /example-gjs-route', async function (assert) {
+    await visit('/example-gjs-route');
+    assert.strictEqual(currentURL(), '/example-gjs-route');
+    assert.dom('[data-test="model-field"]').containsText('I am the model');
+    assert.dom('[data-test="controller-field"]').containsText('This is on the controller');
+    assert.dom('[data-test="component-getter"]').containsText('I am on the component');
+  });
+});