Template Imports

When adding Glint to an Ember project with ember-template-imports installed, there are a few additional things to consider.


In addition to the @glint/core, @glint/template and @glint/environment-ember-loose packages, you also need to install the @glint/environment-ember-template-imports package and configure it in tsconfig.json under glint.environment:

yarn add --dev @glint/core @glint/template @glint/environment-ember-loose @glint/environment-ember-template-imports
  "compilerOptions": { /* ... */ },
  "glint": {
    "environment": [

Template-Only Components

When using ember-template-imports, you can declare the type of a <template> component using the TOC type:

import type { TOC } from '@ember/component/template-only';

interface ShoutSignature {
  Element: HTMLDivElement;
  Args: { message: string };
  Blocks: {
    default: [shoutedMessage: string];

const louderPlease = (message: string) => message.toUpperCase();

const Shout: TOC<ShoutSignature> = <template>
    <div ...attributes>
        {{yield (louderPlease @message)}}
export default Shout;

Last updated