Repository: storybook
Issue: Storybook Docs (angular) addon does not show compodoc documentation on production build
Labels: bug,angular,addon: docs,build-storybook

**Describe the bug**
A clear and concise description of what the bug is.

When building storybook for production, the angular docs plugin will fail to render the table of inputs/outputs/properties/etc. for stories in CSF format with a "component" property on the default export **if webpack minifies the code**.

**To Reproduce**
Steps to reproduce the behavior:

1. Set up the webpack configuration via .storybook/main.js to minify production code
2. Generate the documentation.json file with compodoc and run build-storybook
3. Serve static content. On the dev server, the component documentation will show up successfully render the inputs/outputs/properties/etc., but with the minified production build it won't show up.

**Expected behavior**
A clear and concise description of what you expected to happen.

Both the dev build and production build of storybook should render the component docs.

**Screenshots**
If applicable, add screenshots to help explain your problem.

Figured this one out via reverse engineering the code a bit. I added some logging statements in the compiled react code in my node_modules which captures this behavior when the "Props" component gets rendered into the dom (i.e. right before "extractProps()" is invoked)

Code added to `@storybook/addon-docs/dist/blocks/Props.js`:
![image](https://user-images.githubusercontent.com/6354401/109070402-75f94180-76c0-11eb-80d7-22cba68fb027.png)

Code added to `@storybook/addon-docs/dist/frameworks/angular/compodoc.js`:
![image](https://user-images.githubusercontent.com/6354401/109070655-c4a6db80-76c0-11eb-945e-574b0edaefbf.png)

Behavior on dev server:
![image](https://user-images.githubusercontent.com/6354401/109070563-a7720d00-76c0-11eb-82df-33ebea5b0bb1.png)

Behavior on minified production build:
![image](https://user-images.githubusercontent.com/6354401/109070292-4e09de00-76c0-11eb-8a90-5ecb6b0d5980.png)

**Code snippets**
If applicable, add code samples to help explain your problem.

See above section.

**System**
Please paste the results of `npx sb@next info` here.

```
Environment Info:

  System:
    OS: macOS 11.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 10.24.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-actions: ^5.3.19 => 5.3.19
    @storybook/addon-docs: ^5.3.19 => 5.3.19
    @storybook/addon-knobs: ^5.3.19 => 5.3.19
    @storybook/addon-links: ^5.3.19 => 5.3.19
    @storybook/addon-notes: ^5.3.19 => 5.3.19
    @storybook/addon-storysource: ^5.3.19 => 5.3.19
    @storybook/addons: ^5.3.19 => 5.3.19
    @storybook/angular: ^5.3.19 => 5.3.19
```

**Additional context**
Add any other context about the problem here.

It appears this happens because the `@storybook/addon-docs/angular` library uses `Component.name` on the class declaration for the component to determine the name of the component it should be looking up in documentation.json. When the build is minified, `Component.name` typically resolves to a single character like "c", which doesn't match any names in documentation.json and therefore fails to render the component documentation on the docs page. I'm not sure whether or not this same behavior would happen with .mdx as we're not using it at the moment.

The current workaround is to disable minification in the webpack config like so:

```typescript
// in .storybook/main.js

module.exports = {
	stories: [ /* ... */ ],
	addons: [ /* ... */ ],
	webpackFinal: async (config) => {
            config.optimization = {
                minimize: false
            };
            return config;
        }
}
```