I am facing a challenge with my project that involves both express and Angular. In this discussion, I will focus only on the express side.
https://i.sstatic.net/C1blt.png
When importing custom modules on the server side, I use the following syntax:
import { PayPal } from "@helpers/paypal";
import { Database } from "@models/database";
I have set up a baseUrl and paths in tsconfig.json as follows:
"baseUrl": ".",
"paths": {
"@helpers/*": [
"helpers/*"
],
"@models/*": [
"models/*"
]
}
While TypeScript (tsc) runs smoothly, webpack encounters an error:
Error: Cannot find module '@helpers/paypal'
To resolve this issue, documentation suggests adding an alias to webpack.config file like this:
module.exports = {
"resolve": {
"extensions": [
".ts",
".js",
".json"
],
alias: {
"@helpers/*": path.resolve(path.join(__dirname, 'server', 'helpers')),
},
"modules": [
"./node_modules"
],
...etc
I have experimented with different path configurations, but none have been successful so far.
ADDITIONAL INFORMATION ON FOLDER STRUCTURE IMAGE
The actual path of the helpers folder is: /server/helpers
The import statement that works in TypeScript is: import { PayPal } from "@helpers/paypal";