Repository: storybook
Issue: Storybook and angular library: Cannot read property 'selector' of undefined
Labels: bug,has workaround,angular

**Describe the bug**
When I generate a component in an angular library (ng11), and I am going to use it in a storybook, it shows me the error of: 

`Cannot read property 'selector' of undefined.`

**To Reproduce**
https://github.com/krbaio3/sb-lib-issue

**System**
  System:
    OS: macOS 11.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.11.2 - ~/.nvm/versions/node/v15.14.0/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 88.0
    Safari: 14.1
  npmPackages:
    @storybook/addon-actions: ^6.2.9 => 6.2.9 
    @storybook/addon-essentials: ^6.2.9 => 6.2.9 
    @storybook/addon-links: ^6.2.9 => 6.2.9 
    @storybook/angular: ^6.2.9 => 6.2.9 

**Additional context**

Create an angular project: `ng new design-system --create-application=false --prefix=ds --style=scss`

Create a angular-lib: `ng generate library pattern-lib --prefix=pl`

Change the `name` of `design-system/projects/pattern-lib/package.json` to `@css/pattern-lib`

Change the `path` property of `design-system/tsconfig.json` from `pattern-lib` to `@css/pattern-lib`

Generate the component `ng generate component button --project=pattern-lib`

My button component is:

```ts
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'pl-button',
  template: `<button [attr.is-pink]="pink" [ngClass]="{'make-pink': pink}">{{label ? "😎 " + label : "No Label provided
  🧐"}}</button>`,
  style: [`
button {
  background: blue;
  padding: 1rem 2rem;
  border-radius: 3px;
  appearance: none;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: white;
  box-shadow: 0 4px 10px rgba(55, 55, 55, 0.3),
    0 6px 35px rgba(55, 55, 200, 0.7);
  cursor: pointer;

  &.make-pink {
    background: #ff00a2;
    box-shadow: 0 4px 10px rgba(55, 55, 55, 0.3),
      0 6px 35px rgb(200 55 150 / 70%);
  }
}`
]
})
export class ButtonComponent {

  @Input('label') label: string | null;
  @Input('pink') pink: boolean;

}
```

Change tsconfig properties of `design-system/projects/pattern-lib/tsconfig.lib.json`. Add this property: 

```json
{
"angularCompilerOptions": {
    "enableIvy": false,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
}
```
Generate the lib dist: `ng build`

Init the storybook with `npx -p @storybook/cli sb init --type angular`

Generate my custom story: `MyButton.stories.ts`

```ts
import {Meta, Story} from '@storybook/angular/types-6-0'

// import { ButtonComponent } from '@css/pattern-lib';

import { ButtonComponent } from 'projects/pattern-lib/src/public-api';

export default {
  title: 'Custom/Buttons',
  component: ButtonComponent,
  argTypes: {
    label: {
      control: 'text'
    }
  }
} as Meta;

const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
  component: ButtonComponent,
  props: args
});

export const FancyBlueButton = Template.bind({});

FancyBlueButton.args = {
  label: 'Button',
};

export const FancyPinkButton = Template.bind({});

FancyBlueButton.args = {
  label: 'Pink version',
  pink: true,
}
```

I run: `npm run storybook`

If I run with this code, (import { ButtonComponent } from 'projects/pattern-lib/src/public-api';) the storybook works.

But, if I change the import (commented) import { ButtonComponent } from '@css/pattern-lib'; the storybook fails, with the error Cannot read property 'selector' of undefined

![image](https://user-images.githubusercontent.com/22777201/117299832-3ea1d080-ae79-11eb-9d88-8934c8a27b05.png)