NG0304: 'test-component' is not a known element using Storybook

Viewed 33

I just created a test app using Angular web-components and Storybook. Everything works fine in a standard dev mode, but not in Storybook. Can't figure out what is wrong

The error log:

core.mjs:7404 NG0304: 'test-component' is not a known element (used in the 'StorybookWrapperComponent' component template):
1. If 'test-component' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'test-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Here is app.module.ts

import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TestComponentComponent } from './components/test-component/test-component.component';

@NgModule({
  declarations: [AppComponent, TestComponentComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  entryComponents: [AppComponent, TestComponentComponent],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(injector: Injector) {
    const test = createCustomElement(TestComponentComponent, { injector });
    customElements.define('test-component', test);
  }
  ngDoBootstrap() {}
}

test.story.ts

import { Meta, StoryFn } from '@storybook/angular';

import { TestComponentComponent } from '../app/components/test-component/test-component.component';

export default {
  title: 'TestComponent',
  component: TestComponentComponent,
  argTypes: {
    onClick: {},
  },
} as Meta<typeof TestComponentComponent>;

const Template: StoryFn<typeof TestComponentComponent> = (args) => ({
  components: { TestComponentComponent },
  setup() {
    return { args };
  },
  template: '<test-component></test-component>',
});

export const Primary = Template.bind({});
Primary.args = {};

and the component.ts it self

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.scss'],
})
export class TestComponentComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

Where is a problem?

0 Answers
Related