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

Using p5.js with TypeScript and Webpack is not supported

The Angular4 service being utilized is not defined within the public function

When utilizing RxJS, the process of filtering Observable data may not function as expected if the filtering is carried out within a separate function rather than directly within the subscribe

The element of type 'OverridableComponent<LinkTypeMap<{}, "a">>' cannot be assigned to a 'ReactNode'

Step-by-step guide on implementing virtual scroll feature with ngFor Directive in Ionic 2

The dropdown will close automatically when the user clicks outside of it

NodeJS/express: server became unresponsive after running for some time

Theme not being rendered properly following the generation of a dynamic component in Angular

Arrange a collection of objects by two criteria: the end time, followed by the status in accordance with the specified array order if the end times are equal

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

When trying to create a new project using `ng new project`, the path specified was not

Utilizing directives while initiating dynamic components

Is there a way to prevent vertical scrolling during left swipes in Ionic?

Experiencing issues with the functionality of getServerSideProps in my project

An improved method for implementing conditional statements in Angular

`Incorporate concurrent network requests in React for improved performance`

The bamboo construction falters as webpack is unable to locate the node_modules

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Encountering issues with running npm install on a local Angular project

There was an error during module build process: ReferenceError occurred due to an unrecognized plugin "import" specified in "base" at position 0