[Angular] Template parse error binding to the property of a nested component

[nareshbhatia]

I have an Angular component which has a nested component inside it. The component works well in my app but not inside Storybook. Storybook throws the following error:

Error: Template parse errors:
Can't bind to 'order' since it isn't a known property of 'app-order-progress-bar'.
1. If 'app-order-progress-bar' is an Angular component and it has 'order' input, then verify that it is part of this module.
2. If 'app-order-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

I found this comment suggesting a possible solution, but it is not explained well. Specifically, what is TestModule? Is it defined by Storybook? If yes, what is the exact import statement?

[nareshbhatia]

FYI, I ran into the same issue when I ran the default Jasmine tests generated by Angular CLI. The issue is that TestBed does not know about the nested components. So they have to explicitly declared. See declarations section below:

import { OrderProgressBarComponent } from '../order-progress-bar/order-progress-bar.component';

describe('OrderViewComponent', () => {
    let component: OrderViewComponent;
    let fixture: ComponentFixture<OrderViewComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [OrderViewComponent, OrderProgressBarComponent]
        }).compileComponents();
    }));
    ...
});

Angular has good documentation on this: https://angular.io/guide/testing#nested-component-tests.

I assume Storybook is running into the same issue and we would have to do something similar to fix this.

[igor-dv]

You should define all the relevant declarations/providers/what-ever-needed in the story's moduleMetadata to make your component rendered in isolation.

[nareshbhatia]

@igor-dv, thank you so much! I had looked at the Storybook for Angular docs earlier but the Module Metadata section had not registered :-). I am good to go now. For anyone going through this journey, I have published my example on Github.

Next stop: StoryShots!