baseUrl and paths resolution using Webpack 2 and awesome-typescript-loader

Question

I want to setup my project so where ever I use the line below:

import { BlahBlahService } from '@blahblah/core/BlahBlahService';

it is resolved to:

./dist/blahblah/core/BlahBlahService

I already have read through online resources and applied the instructed settings (which I also include below). This is working in Visual Studio Code; i.e. It is not showing error to me hence it is able to correctly read my settings at tsconfig and understand it. I want to make the same thing happen to Webpack.

However I am getting the following error:

ERROR in ./xxxxxxxxxxx.ts Module not found: Error: Can't resolve '@blahblah/core/BlahBlahService' in 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'

I have the following setup in my web application:

• Angular 2 Version 2.2.0
• Typescript Version 2.0.8
• Webpack Version 2.1.0-beta.26
• awesome-typescript-loader Version 2.2.4

I also have the following in my tsconfig:

"compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
       "@blahblah/core": ["./dist/blahblah/core"],
       "@blahblah/core/*": ["./dist/blahblah/core/*"],
    }

    ...

 }

And I have the following setting in my webpack.js file:

plugins: [

    ...

    new TsConfigPathsPlugin(),

    ...
],

Answer 1

I'm currently working with [email protected] and [email protected].
Same issue. I found the solution in a github issue.

tsconfig.js:

"compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
        "~/*": ["./src"],
    }
}

webpack.config.js:

var TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;

resolve: {
    alias: {
        "~/": "./src"
    },
    plugins: [
        new TsConfigPathsPlugin()
    ]
}