Storybook with Angular Couldn't find story matching 'story-title--task-name'

Question

I try to work with Storybook in my Angular project, and I run into a misterious error message, and I have no clue what's happening here.

This is my tag.component.stories.ts file:

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { AppRoutingModule } from 'src/app/app-routing.module';
import { TagComponent } from './tag.component';

export default {
  title: 'Attached Tags',
  component: TagComponent,
  decorators: [
    moduleMetadata({
      declarations: [TagComponent],
      imports: [BrowserModule, CommonModule, RouterModule, AppRoutingModule]
    })
  ]
} as Meta;

const Template: Story = (args) => ({
  props: {
    ...args
  }
});

export const GreenPost = Template.bind({});
GreenPost.args = {
  tag: {
    id: 1,
    name: 'Test tag',
    color: '#bada55',
    type: 'Post'
  }
};

I get this error message:

Couldn't find story matching 'attached-tags--green-post'.
- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.

So, I'm pretty sure after reading the documentation's "Simple component" section I don't have any idea how or where should I need to define any id for stories.

Here is my .storybook/main.js:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/angular",
  "core": {
    "builder": "webpack5"
  }
}

This is the factory default I think.

Also checked the browsers console, and nothing else, just the visible message twice.

Any idea how can I solve this issue?