Repository: storybook
Issue: Angular 12 library with storybook: Cannot access 'component' before initialization
Labels: bug,has workaround,angular

**Describe the bug**

**This bug only happens when setting the path in tsconfig.json to the source files of the library instead the dist file**

To make an Angular library works smoothly with the app live reload, I followed this SO answer https://stackoverflow.com/a/65866136/1015648, in short, I needed to replace the default paths of the library in `tsconfig.json` with the source library files instead of usin the dist path.

When I added the storybook, it builds successfully but throws a runtime error:

```
bootstrap:27 Uncaught ReferenceError: Cannot access 'CarouselNav' before initialization
    at Object../projects/ng-gallery/src/lib/carousel/carousel-nav/carousel-nav.component.ts (carousel-nav.component.ts:26)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../projects/ng-gallery/src/lib/carousel/carousel.module.ts (carousel.model.ts:37)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../projects/ng-gallery/src/lib/carousel/index.ts (centralised-slider.ts:24)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../projects/ng-gallery/src/lib/components/gallery.component.ts (gallery-thumbs.component.ts:15)
```

The error is thrown because of injecting the parent component in a directive which works fine outside the storybook

```ts
@Directive({
  selector: '[carouselNavNextButton]'
})
export class CarouselNavNextButton {
  constructor(@Inject(forwardRef(() => CarouselNav)) public parent: CarouselNav) {
  }
}
```

```
{
  "compilerOptions": {
    "paths": {
      "ng-gallery": [
        "projects/ng-gallery/src/lib"
      ],
      "ng-gallery/*": [
        "projects/ng-gallery/src/lib/*"
      ]
    }
}
```

**To Reproduce**

`ng g lib my-lib`

Go to projects `/my-lib/src/lib` directory and create `index.ts` file which exports lib components that are meant to be publicly available

Edit the projects `/my-lib/src/public-api.ts` file in a way it exports all from the previously created `index.ts` file, e.g.: `export * from './lib/index';`

```
{
  "compilerOptions": {
    "paths": {
      "my-lib": [
        "projects/my-lib/src/lib"
      ],
      "my-lib/*": [
        "projects/my-lib/src/lib/*"
      ]
    }
}
```

**System**
```
Environment Info:

  System:
    OS: macOS 11.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.16.1 - /usr/local/bin/node
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 92.0.4515.107
    Edge: 92.0.902.62
    Safari: 14.1.2
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.22 => 6.4.0-alpha.22 
    @storybook/addon-essentials: ^6.4.0-alpha.22 => 6.4.0-alpha.22 
    @storybook/addon-links: ^6.4.0-alpha.22 => 6.4.0-alpha.22 
    @storybook/angular: ^6.4.0-alpha.22 => 6.4.0-alpha.22 
    @storybook/builder-webpack5: ^6.4.0-alpha.22 => 6.4.0-alpha.22 
    @storybook/manager-webpack5: ^6.4.0-alpha.22 => 6.4.0-alpha.22 
```

**Additional context**