Own component in Framework7-svelte

Hello, I am using framework7-svelte and I would like make my own svelte component and add it into my Framework7 Page.

I have this (TrainingView.svelte):

<Page name="Training">
  <div slot="after">
    <TestComponent />
  </div>
</Page>

<script>
  import { Page } from 'framework7-svelte';
  import { TestComponent } from './TestComponent.svelte';
</script>

and this (TestComponent.svelte):

<h1> test </h1>

<script>
  alert("test");
</script>

in same directory. And TrainingView page I have in router:

      {
        path: '/Training',
        component: TrainingView
      }

But when is the page loaded so it is blank and the TestComponent is not there and also alert is not showed…

Do anybody know what I have a wrong?
Thanks

Page component doesn’t have such “after” slot

Ok but without <div slot="after"> it also not work…
How can I import or add my own component there?

I guess you have syntax error:

import { TestComponent } from './TestComponent.svelte';

as for me, should be

import TestComponent from './TestComponent.svelte';

Yes, now it works!! :partying_face:
Sorry for this stupid error…