Support baseUrl and paths resolution as implemented in TS 1.9

[guncha]

I was trying to use awesome-typescript-loader with typescript@next to see if I could set it all up to avoid this whole import {..} from "../../../../../dep business and it seems like baseUrl option solves it, but only when not running through the loader.

When running with the loader, I'm getting an error:

Error: Cannot resolve module 'dep' in app
  at ResolutionError.Error (native)
  at new ResolutionError (node_modules/awesome-typescript-loader/dist.babel/deps.js:577:88)
  at node_modules/awesome-typescript-loader/dist.babel/deps.js:402:37

Does the loader have its own module resolution strategy? If so, can we extend it to support what's being discussed in microsoft/TypeScript#5039 or perhaps use the compiler's?

[s-panferov]

@guncha this error is about webpack and how it resolves modules. Webpack knows nothing about typescript, it uses basic node-style module resolution strategy. I need to think about how to connect webpack's resolution config with typescript's one, but right now there is a workaround:

• If you use baseUrl: add it to webpack's resolve.root
• If you use paths: add it to webpack's resolve.alias

[guncha]

I see, that's very interesting. I had assumed that the loader tells webpack "hey, add these files as dependencies", but I guess it's the other way around.

[TheLarkInn]

@s-panferov how would you go about setting this in alias in webpack. (I've pasted below what I've been able to get to work in ts-loader. If it helps.

ts.config

    "paths": {
      "@angular2-material/core/*": [
        "./core/*",
        "../core/*"
      ],
      "@angular2-material/*": [
        "./components/*",
        "../components/*"
      ]
    }

webpack.config.js

var components = [
    'button',
    'card',
    'checkbox',
    'grid-list',
    'icon',
    'input',
    'list',
    'progress-bar',
    'progress-circle',
    'radio',
    'sidenav',
    'slide-toggle',
    'button-toggle',
    'tabs',
    'toolbar'
];
/** Map relative paths to URLs. */
var aliasMap: any = {
    '@angular2-material/core': ngAppResolve('./src/core'),
};

components.forEach(function (name) {
  aliasMap[("@angular2-material/" + name)] = ngAppResolve("./src/components/" + name);
  return aliasMap[("@angular2-material/" + name)] = ngAppResolve("./src/components/" + name);
});

export const config = {
  resolve: {
    alias: aliasMap
  }
}

[s-panferov]

@TheLarkInn yes, aliases is the right way to go. I just need to think if it possible to set them automatically , using info from tsconfig.json.

I suppose we need something like

import { tsAliases } from `awesome-typescript-loader`

export const config = {
  resolve: {
     alias: tsAliases({ /* additional aliases */ })
  }
}

[TheLarkInn]

@s-panferov could you set it in compiler.plugin('run') or ('watch-run') or both.

[s-panferov]

@TheLarkInn I don't think so, because as far as I remember webpack creates resolver one time during init process. I need to dig into this.

[TheLarkInn]

@sokra do you have any suggestions for this? I'm not sure the best way to handle aliasing like this.

[sokra]

You can write a resolver plugin for webpack, which takes care of resolving dependencies accoring to a tsconfig relative to the origin file.

[s-panferov]

@sokra ok, I'll try to implement this. Do you have any examples?

[TheLarkInn]

@s-panferov https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L273-L286

Looks like how webpack reads aliases and applies them.

compiler.applyPlugins("after-plugins", compiler);
        // I would assume right here is where we want to add to the resolvers. 
    compiler.resolvers.normal = ResolverFactory.createResolver(assign({
        resolver: compiler.resolvers.normal
    }, options.resolve));

    compiler.resolvers.context = ResolverFactory.createResolver(assign({
        resolver: compiler.resolvers.context,
        resolveToContext: true
    }, options.resolve));
    compiler.resolvers.loader = ResolverFactory.createResolver(assign({
        resolver: compiler.resolvers.loader
    }, options.resolveLoader));

[sokra]

Here is the webpack alias plugin: https://github.com/webpack/enhanced-resolve/blob/master/lib/AliasPlugin.js

It's used here: https://github.com/webpack/enhanced-resolve/blob/master/lib/ResolverFactory.js#L155

---

So you can write your own alias plugin: TsConfigAliasPlugin and use it in the configuration:

resolve: {
  plugins: [
    new TsConfigAliasPlugin("described-resolve", "resolve")
  ]
}