Fixes component imports from dist

[kroeder]

Issue: N/A

What I did

There was a bug with the webpack plugin TsconfigPathsPlugin where Storybook in Angular could not import angular components when they are built.

This was my test scenario

// Starting from a projects/index.stories.ts file

// Fails (path: ./dist/lib-a)
import { LibAModule } from 'lib-a';

// Works (path: /projects/lib-a/src/lib/lib-a.module.ts)
import { LibAModule } from '../lib-a/src/lib/lib-a.module';

After checking the angular values here: https://github.com/angular/angular-cli/blob/9f114aee1e009c3580784dd3bb7299bdf4a5918c/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/server.ts#L21

I added

      new TsconfigPathsPlugin({
        configFile: cliWebpackConfigOptions.buildOptions.tsConfig,
        // After ng build my-lib the default value of 'main' in the package.json is 'umd'
        // This causes that you cannot import components directly from dist
        // https://github.com/angular/angular-cli/blob/9f114aee1e009c3580784dd3bb7299bdf4a5918c/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts#L68
        mainFields: [
          ...(cliWebpackConfigOptions.supportES2015 ? ['es2015'] : []),
          'browser',
          'module',
          'main',
        ],

How to test

• Checkout https://github.com/kroeder/storybook-tsconfig-paths-webpack-issue-repro
• Follow the readme up until 4. to see the issue
• link this change into the app and start storybook again, should work

[kroeder]

I will combine this with angular cli projects in order to have a direct test of this change

[igor-dv]

@kroeder I would keep these PRs separate

[kroeder]

Alright 👍

[codecov]

Codecov Report

Merging #4682 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #4682   +/-   ##
=======================================
  Coverage   35.59%   35.59%           
=======================================
  Files         557      557           
  Lines        6732     6732           
  Branches      884      884           
=======================================
  Hits         2396     2396           
  Misses       3876     3876           
  Partials      460      460

Impacted Files	Coverage Δ
app/angular/src/server/angular-cli_config.js	0% <ø> (ø)	⬆️
...-native/src/preview/components/OnDeviceUI/index.js	0% <0%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 870cee3...4eefcbc. Read the comment docs.