28

I'd like to extend the default webpack config of ionic. Specifically, I'd like to add an alias for resolving modules so that I can import modules by their absolute path, rather than a relative one:

Instead of importing modules like this:

import { SomeComponent } from '../../components/some.component.ts';

I want to

import { SomeComponent } from '@app/components/some.component.ts';

where @app is an alias for the root source directory.

In other projects I was able to do this by adding something like this to the webpack config:

module.exports = {
    ...   
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            '@app': path.resolve('./'),
        }
    },
    ...
};

I'm not sure how to do this with Ionic without overriding the default webpack config.

qzr
  • 722
  • 1
  • 6
  • 13

5 Answers5

31

The accepted answer works fine but you will have to update webpack.config.js each time you update app-script. So instead of copying code, require it in webpack.config.js

package.json

  "config": {
    "ionic_webpack": "./config/webpack.config.js"
  }

webpack.config.js

const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
webpackConfig.resolve = {
                    extensions: ['.ts', '.js'],
                    alias: {
                            '@app': path.resolve('./'),
                            }
                  }

In most cases you can follow this approach and you wont have to update config each time you update app-script

daveywc
  • 3,136
  • 7
  • 45
  • 58
raj
  • 5,989
  • 7
  • 30
  • 62
  • @raj : I tried following module.exports = function () { webpackConfig.resolve = { extensions: ['.ts', '.js'], alias: { '@app': path.resolve('./src/app') } }; but it errors Cannot find module '@app/tabs/tabs'. Did you modify baseurl or paths in tsConfig.json as well? – Maverick09 Oct 23 '17 at 14:40
  • you'll want to add an import for "path" to your webpack.config.js (i.e. "const path = require('path');") – eugene Dec 25 '17 at 13:25
16

You may want to copy the existing webpack.config.js file, modify it and configure to use it instead of the initial one.

Here are the steps

  1. On the root folder of your project create config folder and copy the file webpack.config.js there (this file is located in ..\node_modules\@ionic\app-scripts\config

  2. Modify the copied file as required

  3. In the file package.json from your project add:

    "config": { "ionic_bundler": "webpack", "ionic_webpack": "./config/webpack.config.js" }

DDRamone
  • 1,078
  • 11
  • 18
Alex Ryltsov
  • 2,385
  • 17
  • 25
  • This did not work for me. I am getting the message "Config file "...\config\webpack.config.js" not found. Using defaults instead.". But if i copy the path and paste it into a file explorer, then the file is found. So it exists but somehow webpack cant find it and uses the default instead :s. Any ideas? (i have googled this a lot but found no one in similar situation) – Diemauerdk Nov 14 '17 at 10:17
14

Module path mapping in @Ionic version - 3.14.0

Incase someone is having similar trouble to figure out exact changes to get this working.

In ionic 3 (version 3.14.0), in order to get alias mapping working, you will have to define path mapping both in webpack.config.js & tsconfig.json

  1. package.json

To use custom webpack config, configure your package.json to load your custom webpack.config.js.

"config": {
    "ionic_webpack": "./config/webpack.config.js"
  }
  1. config/webpack.config.js
  • Reference the existing webpack
  • Define the alias path

  • Merge the alias with default webpack config ...

    const path = require('path');
const { dev, prod } = require('@ionic/app-scripts/config/webpack.config');
const webpackMerge = require('webpack-merge');

const customConfig = {
  resolve: {
    alias: {
      '@app': path.resolve('src/app'),
      '@pages': path.resolve('src/app/pages'),
      '@constants': path.resolve('src/app/constants'),
      '@components': path.resolve('src/app/components'),
      "@shared": path.resolve('src/app/shared')
    }
  }
};

module.exports = {
     dev: webpackMerge(dev, customConfig),
     prod: webpackMerge(prod, customConfig)
};
  1. config/test/webpack.config.js
  • Reference the existing webpack
  • Define the alias path

  • Merge the alias with default webpack config ...

    const path = require('path');
const webpackDefault = require('@ionic/app-scripts/config/webpack.config');
const webpackMerge = require('webpack-merge');

const customConfig = {
  resolve: {
    alias: {
      '@app': path.resolve('src/app'),
      '@pages': path.resolve('src/app/pages'),
      '@constants': path.resolve('src/app/constants'),
      '@components': path.resolve('src/app/components'),
      "@shared": path.resolve('src/app/shared')
    }
  }
};

module.exports = webpackMerge(webpackDefault, customConfig);
  1. tsconfig.json

  • Define baseUrl & paths in tsconfig.json like following:

      {
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
       "@app/*": ["app/*"],
       "@pages/*": ["app/pages/*"],
       "@constants/*": ["app/constants/*"],
       "@components/*": ["app/components/*"],
       "@shared/*": ["app/shared/*"]
     }
   },
 }

Ref: My ionic env info:

cli packages:

@ionic/cli-plugin-proxy : 1.4.13
@ionic/cli-utils        : 1.14.0
ionic (Ionic CLI)       : 3.14.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 ios 4.5.1
Ionic Framework    : ionic-angular 3.6.0
Maverick09
  • 1,067
  • 1
  • 11
  • 21
  • Suggested a comment to include prod/test fields in order for this answer to work correctly with the newer ionic config. It's also worth mentioning the test webpack config (`./test-config/webpack.test.js`) should be updated as well. – mattchue Apr 03 '18 at 20:30
  • @mattchue: Thanks, I have updated answer to include ./test-config/webpack.test.js as well. – Maverick09 Apr 04 '18 at 21:28
  • Sweet, thanks for doing that. For whatever reason, the SO gods rejected my edit, go figure. This should definitely be selected as the correct answer to this question. – mattchue Apr 10 '18 at 20:53
3

Hi Maverick09 answer is awesome but it did not work for me I am using this configuration:

cli packages: 

@ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2

local packages:

@ionic/app-scripts : 3.0.1
Ionic Framework    : ionic-angular 3.8.0

System:

Node : v6.10.0
npm  : 3.10.10
OS   : Windows 10

default configuraion has two parts dev and prod so if you change custom config like this seems every thing working

const customConfig = {
    dev: {
        resolve: {
            alias: {
                '@app': path.resolve('src/app'),
                '@pages': path.resolve('src/pages'),
                '@common': path.resolve('src/common'),
                '@storyboards': path.resolve('src/storyboards'),
                "@locale": path.resolve('src/locale')
            }
        }
    },
    prod: {
        resolve: {
            alias: {
                '@app': path.resolve('src/app'),
                '@pages': path.resolve('src/pages'),
                '@common': path.resolve('src/common'),
                '@storyboards': path.resolve('src/storyboards'),
                "@locale": path.resolve('src/locale')
            }
        }
    }
};
Rashid Mousavy Khoshrou
  • 239
  • 6
  • 15
0

In recent versions of ionic, alias is not working unless you use this fix (let typescript loader know the alias): tsconfig.json

  "compilerOptions": {
...
    "baseUrl":  "./src",
    "paths": {
      "@app/config": ["config/config"]
    }
  }
...

credit: https://github.com/ionic-team/ionic-app-scripts/pull/683#issuecomment-294078919

My ionic info:

cli packages: (/Users/.../node_modules)

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.6.0

System:

Node       : v6.9.5
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13 
npm        : 5.3.0
Luckylooke
  • 4,061
  • 4
  • 36
  • 49
  • did you still have to create webpack.config.js to define alias path or this alone will work ? – Maverick09 Oct 23 '17 at 15:04
  • In my opinion it will not work without webpack part. Because webpack is supposed to concat files together and so replacing aliases. Typescript part is just fixing typescript errors caused by using aliases. – Luckylooke Oct 24 '17 at 09:50