Search code examples
javascriptangularjswebpackwebpack-2

Shorter relative paths with Angular - Webpack and Typescript

So i see myself ending up with a lot of ../../../ in my imports. How can i set a constant in a config so that both webpack and typescript resolve correctly?

I have tried doing the below, but it's unable to resolve the path in the import.

tsconfig.json:

"baseUrl": ".",
"paths": {}

webpack.common.js under module.exports

resolve: {
    extensions: ['.ts', '.js'],
    modules: [path.resolve(__dirname, "src"), "node_modules"]
},

I intended to let typescript look from the main dir (above src), and ask webpack to get modules from "src".

My IDE isn't complaining (So Typescript should be ok). Webpack is.

Solution

  • I almost got it right. The webpack exports should be:

    resolve: {
    extensions: ['.ts', '.js'],
    modules: ["src", "node_modules"]
},

    instead of

    resolve: {
    extensions: ['.ts', '.js'],
    modules: [path.resolve(__dirname, "src"), "node_modules"]
},