Ionic webpack aliases not working

Ionic Framework ionic-v3
1

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.

src/config/webpack.config.js

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: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    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'
  }
};

tsconfig.json

{
  "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": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "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"
Stack
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)
2 Likes
2

Did you find a solution for that?

3

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

4

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

5

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

6

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?

7

Hi,

See: https://robferguson.org/blog/2017/11/22/working-with-typescript-webpack-and-ionic-3/

Cheers
Rob

2 Likes
8

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