Useful or not, from you.
storybook TypeScript modules not resolved when using "baseUrl".

Support request summary

@storybook/angular is not resolving non-relative imports. I believe non-relative imports are a relative new feature of TypeScript that allow you to reference imports from a baseUrl rather than always using relative imports to your own code.

I think that support for this feature should be a priority as VS Code will now rename all your modules to use non-relative imports automatically when you move/rename a file so its difficult problem to avoid.

Steps to reproduce

Create a strorybook project with Angular 6.1.1 and use non-relative imports in your code, e.g.


import { environment } from 'environments/environment';
// instead of import { environment } from '../environments/environment';

Please specify which version of Storybook and optionally any affected addons that you're running

"@storybook/addon-actions": "^4.0.0-alpha.20",
"@storybook/addon-centered": "^4.0.0-alpha.20",
"@storybook/addon-knobs": "^4.0.0-alpha.20",
"@storybook/addon-links": "^4.0.0-alpha.20",
"@storybook/addon-notes": "^4.0.0-alpha.20",
"@storybook/addon-storysource": "^3.4.10",
"@storybook/addons": "^4.0.0-alpha.20",
"@storybook/angular": "^4.0.0-alpha.20",

Affected platforms

Windows 10


I have managed to work around this using the TsconfigPathsPlugin and modifying my tsconfig.json file to use compilerOptions.paths (note the mappings look slightly ridiculous).


  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "es2015",
    "paths": {
      "app/*": ["app/*"],
      "pages/*": ["pages/*"],
      "shared/*": ["shared/*"],
      "environments/*": ["environments/*"]
  "exclude": [
  "include": ["../src/**/*"]

NB: compilerOptions.baseUrl has a value of "./src" in my root tsconfig.json


const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = (baseConfig, env, config) => {
  config.resolve.plugins = config.resolve.plugins || [];
    new TsconfigPathsPlugin({
      configFile: path.resolve(__dirname, '../tsconfig.json')
  return config;

NB: The initial build is also excruciatingly slow, but I don't think its related.

That's a useful answer
Without any help

@cwmrowe adding this to the storybook webpack config works:

// To get tsconfig baseUrl working
  // There is likely a better way to extract the baseUrl from tsconfig.
  config.resolve.modules.push(path.resolve(__dirname, '../src'));

how does it work though? This seems specific to how webpack resolves module, and may or may not be directly co-related to how tsconfig is setup (?)