Alias paths in tsconfig.json and webpack not working


#1

For a project that requires shared lib code between several apps, consider the following directory structor

|-proj/
|–apps/
|—my-mobile-app/
|----src/
|—my-electron-app/
|–libs/
|—core/
|—services/

I would like to use modules in proj/libs/* inside my ionic app which is in proj/apps/my-mobile-app

I don’t want to publish my libs as npm packages because a) these are never going to be public, b) the workflow of changing code and publishing to a local server in order to get the change into the app is too slow. I’ve tried linking modules but because the libs themselves depend on angular and rxjs it all gets into a bit of a mess with multiple versions of angular installed and Http not being provided etc etc

I’ve tried following the instructions from the topic Tsconfig.json modifications not working

I’ve modified the tsconfig.json to include the following:

"baseUrl": ".",
"paths": {
  "@mylibs/*":[
    "../../libs/*"
  ]
}

and also followed the advice from the original post to alter the web pack config like

const path = require('path');
const webpackDefault = require('@ionic/app-scripts/config/webpack.config');
const webpackMerge = require('webpack-merge');

const customConfig = {
  resolve: {
    alias: {
      '@mylibs': path.resolve('../../libs')
    }
  }
};

module.exports = webpackMerge(webpackDefault, customConfig);

The project will compile when I run ionic serve but when I go to the browse I’m given a RuntimeError saying cannot find module @mylibs/services

I’m using ionic v3.19.0

Also, for bonus points, what I’d ideally like long term is to have one node_modules folder in the root, and scripts in the root that can be used to build and serve the individual apps. I know I can do this with angular, is this possible with ionic?

Any help would be greatly appreciated.

Many thanks


#2

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

Resources:


#3

You can also find the solution on this github issue: https://github.com/ionic-team/ionic-cli/issues/1809


#4

Thanks.

That solved it for me. I think my webpack config was wrong, and I was also missing the ‘source_map’ reference in the package.json config