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?