Alias route for `src` in Ionic 3

Question

Alias route for `src` in Ionic 3

I have set up a custom webpack configuration for Ionic 3 in order to use src as a path alias (meaning I can import from src/module/file):

resolve: {
  alias: {
    'src': path.resolve('./src')
  }
}

However, after updating to Ionic app scripts @ 3, I encountered an error stating

Cannot find module src/module/file

when trying to serve or build.

I have come across methods for creating path aliases to import from directories within src (such as app, pages, etc.) that involve modifying the Webpack resolve alias and updating the baseUrl in tsconfig.json. For instance:

https://medium.com/@siddhartha.ng/ionic-3-import-using-aliases-2aa260d6fab3

Nevertheless, my goal is to be able to import directly from src rather than a subdirectory of src. Is there a way to achieve this by adjusting my webpack or TypeScript configuration?

angular typescript ionic-framework webpack

Answer 1

Answer №1

With the latest updates to Ionic 3, the webpack configuration now includes two main properties at the top level: dev and prop, each corresponding to different webpack configurations.

To adapt to this change, you will need to update both the dev and prod properties and export the entire object from the webpack configuration. There are multiple ways to achieve this, but one example is:

const config = require('@ionic/app-scripts/config/webpack.config.js');

config[process.env.IONIC_ENV].resolve.alias = { src: path.resolve('./src') };

module.exports = config; // You can also choose to export a function that returns this

Remember that it is essential to export the complete object with both configurations included. Using module.exports = config[env] alone will not suffice.

Answer 2

With the latest updates to Ionic 3, the webpack configuration now includes two main properties at the top level: dev and prop, each corresponding to different webpack configurations.

To adapt to this change, you will need to update both the dev and prod properties and export the entire object from the webpack configuration. There are multiple ways to achieve this, but one example is:

const config = require('@ionic/app-scripts/config/webpack.config.js');

config[process.env.IONIC_ENV].resolve.alias = { src: path.resolve('./src') };

module.exports = config; // You can also choose to export a function that returns this

Remember that it is essential to export the complete object with both configurations included. Using module.exports = config[env] alone will not suffice.

Alias route for `src` in Ionic 3

Answer №1

Similar questions

Error: Typescript foreach loop encountering 'Expression yields void type'

Step-by-step guide on crafting a harmonious row of a label and a responsive button group

The art of crafting informative error log messages in Protractor using TypeScript

Ensuring type safety in TypeScript arrow function parameters

What strategies can I use to stop webpack from automatically relocating URL encoded fonts into a separate file?

Having trouble deploying my Angular application on Heroku

What is the rationale behind TypeScript's decision to implement two checks for its optional chaining and null-coalescing operators during compilation?

Angular 13 encounters issues loading Bootstrap and JS files whenever the route button is clicked

How to Implement Autocomplete Feature in Angular

Concealing the parent view in Angular 2

The classification of rejected promises in Typescript

Using TypeScript to Extract Keys from an Array

Stop angular material css styles from affecting neighboring components

Advancing the utilization of custom Angular input fields

What is the best way to run a npm webpack vue project on both Windows and Mac operating systems?

Is it possible to apply a style change to several components at once using a single toggle switch

ng serve is consistently experiencing issues due to the absence of exported members

Angular2: Ways to update components with resolver dependencies?

typescript: Imported modules in typescript are not functioning

The Angular module loaded lazily encountered a 401 error