Ionic webpack aliases not working

I’m trying to add a webpack alias in the overridden webpack config. I’ve added the same alias to my tsconfig.json and that works fine but on ionic serve i’m getting a module not found exception.


var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

module.exports = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,
  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')],
    alias: {
// tried both of these iterations per the webpack resolve documentation
      Components: path.resolve(__dirname, '/src/app/components/components.ts')
//    Components$: path.resolve(__dirname, '/src/app/components/components.ts')

  module: {
    loaders: [
        test: /\.json$/,
        loader: 'json-loader'
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER

  plugins: [
    new webpack.EnvironmentPlugin(['IONIC_ENV'])

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'


  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "Components": ["src/app/components/components.ts"],
      "@advtech/services": ["src/app/services/services.ts"]
    "lib": [
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  "include": [
  "exclude": [
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false

Where components.ts looks like

export * from './action/index';
export * from './action_sheet/index';
export * from './collapsible_card/index';
export * from './image/index';
export * from './inputs/index';
export * from './schedule/index';
export * from './popover/index';
export * from './controller/index'
export * from './form/index';

and is used like

import {Image} from 'Components'

Getting the error like so after ionic serve and the page is loaded in the browser

Runtime Error
Cannot find module "Components"
Error: Cannot find module "Components"
    at g (http://localhost:8100/build/polyfills.js:3:7133)
    at Object.<anonymous> (http://localhost:8100/build/main.js:109924:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:110019:87)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:56590:82)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:56604:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.defineProperty.get (http://localhost:8100/build/main.js:109737:71)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.AUTO_STYLE (http://localhost:8100/build/main.js:77558:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:119824:70)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)

Did you find a solution for that?

No not yet. Still waiting to hear back from the ionic team.

Any news on this? It used to work in the past…

All packages updated and aliases still does not work, they used to work in older version of ionic.

The Ionic team has already commented on this problem.

TLDR; They don’t think it’s important enough problem that is worth fixing.

(I wonder if they are even dogfooding Ionic in any decent-sized real-world apps. It’s painful to do typescript imports without aliases.)

Anyone figure out how to customize ionic’s webpack config to work with typescript aliases yet?





Thanks, followed the git repo for your tutorial and I have aliases working now!!