Ionic-app-scripts: Production build does not resolve tsconfig.json paths.

[ngfk]

Short description of the problem:

Production build does not resolve tsconfig.json paths.

What behavior are you expecting?

Production build should resolve modules using the paths defined in tsconfig.json.

Steps to reproduce:

1. Start a new Ionic project ionic start test tabs
2. Modify tsconfig.json to include the following compiler options:
   "baseUrl": "./src", "paths": { "app/*": ["./*"] }
3. Use the path somewhere e.g. in app.component.ts change:
   javascript import { AboutPage } from '../pages/about/about';
   to:
   javascript import { AboutPage } from 'app/pages/about/about';
4. This change also has to be applied to webpack for it to work in development.
   
   
   
   • Create a webpack.config.js file in the root directory with the following content:
     
     javascript const { join } = require('path'); const webpackMerge = require('webpack-merge'); const ionicConfig = require('@ionic/app-scripts/config/webpack.config'); const customConfig = { resolve: { alias: { app: join(__dirname, './src'), } } }; module.exports = webpackMerge(ionicConfig, customConfig);
   
   
   • Run npm i --save-dev webpack-merge
   
   
   • Tell ionic to use our custom config. Add to package.json:
     
     son "config": { "ionic_bundler": "webpack", "ionic_webpack": "./webpack.config.js" }
   
   
5. Run npm run build --prod

Which @ionic/app-scripts version are you using?

ionic info

global packages:

    @ionic/cli-utils : 1.5.0
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v8.1.3
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.1 
    ios-sim    : not installed
    npm        : 5.3.0 

Other information:

Start of stack trace:

[21:02:58]  ionic-app-script task: "build" 
[21:02:58]  Error: ./src/app/app.module.js Module not found: Error: Can't resolve 'app/pages/about/about' in 

[ngfk]

Closing this as it seems that no one else requires this functionality. If anyone else wanted this because the paths are easier to remember I recommend to use an IDE with auto import functionality instead, this way you don't have to bother at all.

e.g. I like using the Typescript Hero extension for vscode.

[gligoran]

@ngfk Can you reopen this? My team and I need this solved as well. Suggesting and IDE plugin for this might be a temporary work-around, but it's definitely not a permanent solution. It also doesn't make sense to close a bug issue because lack of interest.

[ngfk]

@gligoran sure, reopened

[nkete]

same issue here

[Shadowstep33]

Same issue. I have a custom package that I dont want to upload to npm, so I have put it in /src/x and in tsconfig.json I have:

"baseUrl": "./src"

At some point, I had the paths defined as well but that didn't seem to be working either. I can't deploy the app as is because the compiler complains that x does not exist as a package.

[ngfk]

I'll close this because I think it is resolved now.

With the update to @ionic/[email protected], there is a breaking change because the default webpack config now exports an object with a dev and a prod config. For this issue it means that you can tell ionic to use your custom webpack config in production.

Example webpack config:

const { join } = require('path');
const webpackMerge = require('webpack-merge');
const { dev, prod } = require('@ionic/app-scripts/config/webpack.config');

const customConfig = {
  resolve: {
    alias: {
      app: join(__dirname, './src'),
    }
  }
};

module.exports = {
  dev: webpackMerge(dev, customConfig),
  prod: webpackMerge(prod, customConfig),
}

If someone still has issues with this I'll be happy to reopen the issue again.

[andre-davcev]

I tried the recommended solution above, but my local module doesn't seem to resolve. I usually just developed locally and copied to my node_modules folder, but now that I'm copying to Ionic Pro, the local module won't resolve since ionic pro does a fresh npm install.

UPDATE: Looks like my webpack config was not being copied to my dev environment. IGNORE this post.