Not able to create documentation in MDX for Angular Component(Storybook)

Question

I am trying to document a simple button component which is created using Angular 8. I am following the tutorial for creating MDX for Angular but I am getting several errors and the application is failing to compile. I am starting to think that the documentation they have for Angular is either not accurate or I am missing something, please help.

Here's how my MDX document looks like, I'm only trying to create a doc for an existing demo component that comes with the default Storybook installation.

button.stories.mdx

    import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
    import Button from './button.component';
    
    <Meta title="Example/Button" component={Button}/>
    
    # Welcome to Storybook
    
    Storybook helps you build UI components in isolation from your app's business logic, data, and context.
    That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
    
    export const Template = (args) => <Button {...args} />
    
    <Canvas>
        <Story name="Button"
        args={{ 
          label: 'test button'
        }}>
        {Template.bind({})}
       </Story>
    </Canvas>

The button story looks like this:

Button.stories.ts

import { Story, Meta } from '@storybook/angular/types-6-0';
        import Button from './button.component';
        
        export default {
          title: 'Example/Button',
          component: Button,
          argTypes: {
            backgroundColor: { control: 'color' },
          },
        } as Meta;
        
        const Template: Story<Button> = (args: Button) => ({
          component: Button,
          props: args,
        });
        
        export const Primary = Template.bind({});
        Primary.args = {
          primary: true,
          label: 'Button',
        };

FYI: The button story works perfectly out of the box

Answer 1

So after a bit of searching I found something that works, at least my MDX doc is set up and I can see my component:

For anyone looking for the same please go through their docs specifically for Angular here:

https://github.com/storybookjs/storybook/tree/master/addons/docs/angular

Answer 2

I'm a bit late to the party, but I found a very neat trick to use MDX files in Angular with Storybook. If someone ever needs it ...

In .storybook/typings.d.ts, add this content

declare module '*.mdx' {
  const content: string;
  export default content;
}

(It's basically a duplication of the only type in that file, with mdx instead of md)

Once done, you can now import MDX files into your stories !

No need for an obscure add-on or any other voodoo manipulation !