Ionic 3 build using "--prod" flag does not use custom webpack configuration file. Build using "--dev" flag works.

[jgw96]

From @SusanKern on May 2, 2017 13:52

Ionic version: (check one with "x") [ ] 1.x [ ] 2.x [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: Build using "--dev" flag works fine, pulling in configuration from custom webpack configuration file. Build using "--prod" flag fails because it cannot resolve modules as specified in custom webpack configuration file.

Expected behavior: Both --prod and --dev builds would use same custom webpack configuration.

Steps to reproduce:

Related code:

package.json:
{
  "name": "our-app",
  "author": "Our Team",
  "homepage": "http://ourteam.com/",
  "private": true,
  "config": {
    "ionic_webpack": "./webpack.config.js"
  },
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "preinstall": "npm link modules/ng2-contentful",
    "postinstall": "cp -R module_overrides/videogular2 ./node_modules"
  },
  "dependencies": {
    "@angular/animations": "^4.0.2",
    "@angular/common": "^4.0.2",
    "@angular/compiler": "^4.0.2",
    "@angular/compiler-cli": "^4.0.2",
    "@angular/core": "^4.0.2",
    "@angular/forms": "^4.0.2",
    "@angular/http": "^4.0.2",
    "@angular/platform-browser": "^4.0.2",
    "@angular/platform-browser-dynamic": "^4.0.2",
    "@angular/platform-server": "^4.0.2",
    "@angular/router": "^4.0.2",
    "@ionic-native/app-version": "3.6.1",
    "@ionic-native/core": "3.6.1",
    "@ionic-native/device": "3.6.1",
    "@ionic-native/google-analytics": "3.6.1",
    "@ionic-native/network": "3.6.1",
    "@ionic-native/splash-screen": "3.6.1",
    "@ionic-native/status-bar": "3.6.1",
    "@ionic/storage": "2.0.1",
    "@types/marked": "0.0.28",
    "contentful": "^3.7.0",
    "copy-webpack-plugin": "^4.0.1",
    "email-validator": "1.0.7",
    "ionic-angular": "3.1.0",
    "ionicons": "3.0.0",
    "marked": "^0.3.6",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "typescript": "^2.2.1",
    "util": "^0.10.3",
    "uuid": "^3.0.1",
    "videogular2": "^4.0.0",
    "zone.js": "^0.8.9"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.6",
    "@types/node": "^6.0.46",
    "css-loader": "^0.26.1",
    "email-validator": "1.0.7",
    "file-loader": "^0.9.0",
    "json-loader": "^0.5.4",
    "style-loader": "^0.13.1",
    "typescript": "~2.2.1",
    "url-loader": "^0.5.7"
  },
  "cordovaPlugins": [
    "cordova-fabric-plugin",
    "cordova-plugin-app-name",
    "cordova-plugin-google-analytics",
    "cordova-plugin-ios-no-export-compliance",
    "cordova-plugin-network-information",
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-crosswalk-webview",
    "cordova-plugin-app-version",
    "nl.kingsquare.cordova.background-audio"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    },
    "android",
    {
      "platform": "android",
      "version": "",
      "locator": "android"
    }
  ],
  "description": "Our App"
}

Other information: Partial output from successful "--dev" build: (Note that lines describing Env, Build type, Build flavor and Build variant come from custom webpack.config.js file)

$ ionic build --dev

> hcm-care@ ionic:build /Users/skern/LittleGreenSoftware/hcm-care/myokardia
> ionic-app-scripts build "--dev"

[09:47:23]  ionic-app-scripts 1.3.6 
[09:47:23]  build dev started ... 
[09:47:23]  clean started ... 
[09:47:23]  clean finished in less than 1 ms 
[09:47:23]  copy started ... 
[09:47:23]  transpile started ... 
Env is dev
Build type is debug
Build flavor is dev
Build variant is devDebug
[09:47:27]  transpile finished in 3.70 s 
[09:47:27]  preprocess started ... 
[09:47:27]  deeplinks started ... 
[09:47:27]  deeplinks finished in 97 ms 
[09:47:27]  preprocess finished in 99 ms 
[09:47:27]  webpack started ... 
[09:47:27]  copy finished in 4.04 s 
[09:47:42]  webpack finished in 15.38 s 
[09:47:42]  sass started ... 
[09:47:44]  sass finished in 1.42 s 
[09:47:44]  postprocess started ... 
[09:47:44]  postprocess finished in 9 ms 
[09:47:44]  lint started ... 
[09:47:44]  build dev finished in 20.67 s 
[09:47:48]  lint finished in 4.32 s 

Partial output from unsuccessful "--prod" build: (Note that the error indicates that a file from within a module cannot be resolved. This "resolve" should have been specified in the custom webpack configuration file, which apparently never ran.)

$ ionic build --prod --release

> our-app@ ionic:build /our-app/project-name
> ionic-app-scripts build "--prod" "--release"

[15:34:36]  ionic-app-scripts 1.3.6 
[15:34:36]  build prod started ... 
[15:34:36]  clean started ... 
[15:34:36]  clean finished in 2 ms 
[15:34:36]  copy started ... 
[15:34:36]  ngc started ... 
[15:34:45]  ngc finished in 9.30 s 
[15:34:45]  preprocess started ... 
[15:34:45]  deeplinks started ... 
[15:34:46]  deeplinks finished in 566 ms 
[15:34:46]  optimization started ... 
[15:34:46]  copy finished in 10.19 s 
[15:34:54]  ionic-app-script task: "build" 
[15:34:54]  Error: ./src/app/app.module.js Module not found: Error: Can't resolve 'config/contentful.cfg.json' in 
            '/our-app/project-name/src/app' resolve 'config/contentful.cfg.json' in 
            '/our-app/project-name/src/app' Parsed request is a module using description 
            file: /our-app/project-name/package.json (relative path: ./src/app) Field 
            'browser' doesn't contain a valid alias configuration after using description file: 
            /our-app/project-name/package.json (relative path: ./src/app) resolve as 
            module /our-app/project-name/src/app/node_modules doesn't exist or is not a 
            directory /our-app/project-name/src/node_modules doesn't exist or is not a ...

Custom webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
var CopyWebpackPlugin = require('copy-webpack-plugin');

// LGS: Figures out what build type/flavor/etc. Must be run before the exports are defined.
updateEnvironmentFlags();

module.exports = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },

  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: {
    extensions: ['.ts', '.js', '.json', '.css', '.eot', '.svg', '.ttf', '.woff'],
    modules: [
      // LGS addition: to allow us to store custom modules that we can import
      path.resolve('modules'),
      path.resolve('node_modules')
    ]
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        //test: /\.(ts|ngfactory.js)$/,
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'url-loader'
      }
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),

    // LGS addition: to support a rough notion of build "flavors"
    new webpack.DefinePlugin({
      ENV: JSON.stringify( require(path.resolve("modules/config/config-" + process.env.IONIC_FLAVOR + ".js")) )
    }),

    new CopyWebpackPlugin([
      { from: 'static', to: '../' }
    ])
  ],

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

// Get the default "build flavor" if one is not specified.  For dev builds, 
// this will be "local" -- since just running "ionic serve" you would expect 
// it to try to connect to a local backend server. For production builds, 
// it will default to the production flavor as a safeguard in case it is not 
// explicitly set. For flavors like "dev" or "test" where you are trying to
// indicate that the app should connect to a shared dev or test backend 
// server, the build flavor will have to be set explicitly in the 
// environment.
function getDefaultFlavorForEnv(env_string) {
  var result = "local";
  switch (env_string) {
    case "prod":
      result = "production"; break;
    default:
      result = "local";
  }
  return result;
}

function getDefaultBuildTypeForEnv(env_string) {
  var result = "debug";
  switch (env_string) {
    case "prod":
      result = "release"; break;
    default:
      result = "debug";
  }
  return result;
}

function getAndroidVariant(buildType, flavor) {
  var result = flavor + buildType.capitalizeFirstLetter();
  return result;
}

function updateEnvironmentFlags() {
  String.prototype.capitalizeFirstLetter = function() {
      return this.charAt(0).toUpperCase() + this.slice(1);
  }

  process.env.IONIC_FLAVOR = (typeof process.env.IONIC_FLAVOR) != "undefined" ? 
    process.env.IONIC_FLAVOR : getDefaultFlavorForEnv(process.env.IONIC_ENV);

  process.env.IONIC_BUILDTYPE = (typeof process.env.IONIC_BUILDTYPE) != "undefined" ?
    process.env.IONIC_BUILDTYPE : getDefaultBuildTypeForEnv(process.env.IONIC_ENV);

  process.env.IONIC_VARIANT = (typeof process.env.IONIC_VARIANT) != "undefined" ? 
    process.env.IONIC_VARIANT : getAndroidVariant(process.env.IONIC_BUILDTYPE, process.env.IONIC_FLAVOR);

  console.log("Env is " + process.env.IONIC_ENV);
  console.log("Build type is " + process.env.IONIC_BUILDTYPE);
  console.log("Build flavor is " + process.env.IONIC_FLAVOR);
  console.log("Build variant is " + process.env.IONIC_VARIANT);
}

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

$ ionic info

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.1.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: 1.9.0 
ios-sim version: 5.0.9 
OS: OS X El Capitan
Node Version: v7.8.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Copied from original issue: driftyco/ionic#11478

[Sebastien-Guillon]

I am having this problem now with ionic3.0.0-rc.1

I always use the -prod flag and I get an error: Module not found: Error: Can't resolve 'leaflet.awesome-markers' in...

The custom config in my webpack.config.js is an alias in the resolve section:

resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')],
    alias: {
      'leaflet.awesome-markers$': 'leaflet.awesome-markers/dist/leaflet.awesome-markers.js'
    }
  }

This used to work in ionic3.0.0-beta7 (then I jumped to rc1) @danbucholtz thanks for checking this out, let me know if I can help you test.

Edit: building without the --prod flag works

[vkniazeu]

Confirming the same issue (--prod fails, --dev works) with:

ionic info

npm (global):

    @ionic/cli-utils : 1.0.0-beta1
    cordova          : 7.0.0
    ionic            : 3.0.0-beta10

npm (local):

    @ionic/app-scripts              : 1.3.6
    @ionic/cli-plugin-cordova       : 0.0.13
    @ionic/cli-plugin-ionic-angular : 0.0.7
    Ionic Framework                 : ionic-angular 3.1.1

System:

    Node       : v7.9.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

I'm curious as to why the error is thrown before preprocess finished shows in the trace, which I think should precede the webpack started related flow.

ionic cordova build browser --prod
Running app-scripts build: --prod --iscordovaserve --externalIpRequired --nobrowser

[21:22:57]  build prod started ...
[21:22:58]  clean started ...
[21:22:58]  clean finished in 5 ms
[21:22:58]  copy started ...
[21:22:58]  ngc started ...
[21:23:06]  ngc finished in 8.30 s
[21:23:06]  preprocess started ...
[21:23:06]  deeplinks started ...
[21:23:06]  deeplinks finished in 493 ms
[21:23:06]  optimization started ...
[21:23:07]  copy finished in 9.04 s
{ Error: ./src/app/app.module.js
Module not found: Error: Can't resolve '@app/config' ...

[biesbjerg]

This happened somewhere between release 1.3.4 and 1.3.5 (1.3.4 works for me using --prod flag).

Compare: https://github.com/driftyco/ionic-app-scripts/compare/v1.3.4...v1.3.5

[vkniazeu]

The issue is present as well with ionic 3.0.0-rc.1 and "@ionic/app-scripts": "1.3.7".

[biesbjerg]

@vkniazeu: Downgrade app-scripts to 1.3.4 until a fix is out, I'm pretty certain it will work.

[Sebastien-Guillon]

Thanks @biesbjerg, downgrading app scripts to v1.3.4 did the trick for me.

With Ionic version 3.0.0-rc.1, go to project directory:

npm install @ionic/app-scripts@1.3.4 --save-dev

Then modify the webpack.config.js as needed and run:

ionic cordova build android --prod or similar.

[osamasoliman]

ionic-app-scripts performance with webpack and other stuff on ver 1.3.7 showing new updates for the browser is so good. the problem that the--prod flag is not working anymore :(

Should I downgrade to 1.3.4 for production? @jgw96 @danbucholtz

[SusanKern]

I also was able to get --prod to work when I downgraded to 1.3.4. This seems to be a good solution for us for now.

[ Unfortunately once we tested further, we found that much of the interaction in the app did not function with 1.3.4, so this is not a solution we can move forward with. ]

[danbucholtz]

@SusanKern, @osamasoliman, why isn't the --prod flag working for you?

Thanks, Dan

[danbucholtz]

@biesbjerg,

What issue are you having?

Thanks, Dan

[osamasoliman]

What's your Advice @danbucholtz ?

Running ionic build android --prod

> Parent@ ionic:build C:\Users\Osama\Documents\GitHub\ParentApp
> ionic-app-scripts build "--prod"

[05:54:20]  ionic-app-scripts 1.3.7
[05:54:20]  build prod started ...
[05:54:20]  clean started ...
[05:54:20]  clean finished in 14 ms
[05:54:20]  copy started ...
[05:54:20]  ngc started ...
[05:54:50]  ngc finished in 29.82 s
[05:54:50]  preprocess started ...
[05:54:50]  deeplinks started ...
[05:54:51]  deeplinks finished in 1.50 s
[05:54:51]  optimization started ...
[05:54:52]  copy finished in 31.89 s
[05:55:26]  optimization finished in 34.16 s
[05:55:26]  preprocess finished in 35.66 s
[05:55:26]  webpack started ...
[05:57:47]  webpack finished in 141.36 s
[05:57:47]  sass started ...
[05:57:47]  uglifyjs started ...
[05:57:52]  ionic-app-script task: "build"
[05:57:52]  Error: Unexpected token operator «=», expected punc «,» in
            C:\Users\Osama\Documents\GitHub\ParentApp\www\build\main.js at line 107769, col 38, pos 4160177
Error: Unexpected token operator «=», expected punc «,» in C:\Users\Osama\Documents\GitHub\ParentApp\www\build\main.js at line 107769, col 38, pos 4160177
    at new BuildError (C:\Users\Osama\Documents\GitHub\ParentApp\node_modules\@ionic\app-scripts\dist\util\errors.js:16:28)
    at taskReject (C:\Users\Osama\Documents\GitHub\ParentApp\node_modules\@ionic\app-scripts\dist\worker-process.js:36:22)
    at C:\Users\Osama\Documents\GitHub\ParentApp\node_modules\@ionic\app-scripts\dist\worker-process.js:14:13
    at process._tickCallback (internal/process/next_tick.js:109:7)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Osama\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "ionic:build" "--" "--prod"
npm ERR! node v7.9.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! Parent@ ionic:build: `ionic-app-scripts build "--prod"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Parent@ ionic:build script 'ionic-app-scripts build "--prod"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the Parent package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts build "--prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs Parent
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls Parent
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Osama\Documents\GitHub\ParentApp\npm-debug.log```

Running `ionic info`:

```Your system information:
Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.9.0
Xcode version: Not installed```

[ainulya16]

ionic build android --prod --release is not working for me

Cordova CLI: 6.5.0 Ionic Framework Version: 3.1.1 Ionic CLI Version: 2.2.3 Ionic App Lib Version: 2.2.1 Ionic App Scripts Version: 1.3.6 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 10 Node Version: v7.9.0 Xcode version: Not installed

{
  "name": "X",
  "author": "X",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "config": {
    "ionic_webpack": "./webpack.config.js"
  },
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/barcode-scanner": "^3.6.1",
    "@ionic-native/core": "^3.6.1",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/app-scripts": "^1.3.6",
    "@ionic/storage": "2.0.1",
    "angular2-elastic": "^0.13.0",
    "angular2-qrcode": "^2.0.0",
    "chart.js": "^2.5.0",
    "copy-webpack-plugin": "^4.0.1",
    "ionic-angular": "^3.1.1",
    "ionic-native": "^3.5.0",
    "ionicons": "3.0.0",
    "jsbarcode": "^3.5.9",
    "ng2-charts": "^1.5.0",
    "qrcode-generator-ts": "0.0.4",
    "qrious": "^2.2.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.3.4",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard",
    "phonegap-plugin-barcodescanner"
  ],
  "cordovaPlatforms": [
    "android",
    {
      "platform": "android",
      "version": "",
      "locator": "android"
    }
  ],
  "description": "Flow: An template project"
}

[biesbjerg]

@danbucholtz

Like the others describe, my custom webpack config is not being picked up when --prod flag is used.

[danbucholtz]

@biesbjerg,

I'll check it out next week.

Thanks, Dan

[SusanKern]

Any updates on this?

[jbarbede]

I debugged it and it is related to the JS optimization that doesn't load the right webpack config: https://github.com/driftyco/ionic-app-scripts/blob/v1.3.5/src/optimization.ts#L28.

You can run without the --optimizejs option and it will build successfully.

I am not really sure how to fix that but the preprocess task pass null in place of the user's webpack config file there @danbucholtz: https://github.com/driftyco/ionic-app-scripts/blob/v1.3.5/src/preprocess.ts#L33

Or maybe the config file doesn't need to be passed there but in that case the problem comes from the getConfig method: https://github.com/driftyco/ionic-app-scripts/blob/v1.3.5/src/optimization.ts#L28

[danbucholtz]

@jbarbede,

I need to look into this issue still. PRs are welcome if someone wants to dive in and fix it. The optimize task should use the optimization config. You can pass in your own (I think) but I don't recommend that for optimization. The optimization task really just runs webpack to build a dependency tree to purge unused components since we know about the internal structure of Ionic.

The webpack task is fair game to use a custom config and this does actual bundling. There is also an issue with the virtual file system and where we need to write files to disk in addition to the virtual fs. This could be a PR opportunity as well.

Thanks, Dan

[SusanKern]

Is running without the --optimizejs option something we should consider for our production release? We currently build with ionic build android --release --prod. Could you give me an idea of what type of command to use to change that option?

[jbarbede]

@SusanKern, like Dan commented some days ago there https://github.com/driftyco/ionic-app-scripts/pull/870#issuecomment-296289680, you can just replace --prod by --aot --optimizejs --minifyjs --minifycss. --prod is just a shortcut if I understood well.

The best solution is just to downgrade to v1.3.4 for now I guess, this is at least what we are doing on our project.

If you definitvely want to use latest versions, you could test ionic build android --release --aot --minifyjs --minifycss.

I'm not sure what is the gain of optimization, probably build size as Dan said it purges unused components from Ionic.

[danbucholtz]

@jbarbede,

Can you create a quick sample repo that shows the issue? I can probably fix it pretty quickly.

Thanks, Dan

[jbarbede]

Sample there https://github.com/jbarbede/ionic-preview-app/tree/custom-webpack.

The custom webpack config uses a css-loader to simply load a classic .css file imported in app.component to change the color of the header title.

npm run build works, npm run build --prod doesn't.

[DavidWiesner]

@jbarbede you are reference a custom webpack script in your package.json "ionic_webpack": "./build/webpack.config.js"

But I can not find this in your project

[jbarbede]

@DavidWiesner oh you're right, I just pushed it on the branch.

[Nilos]

You have to add an own config for optimization like so: "ionic_dependency_tree": "./config/optimization.config.js"

If you do that the optimization.config.js is picked up correctly. Only problem so far is that I can't get it to work. It always results in problems with ngfactory.ts files.

Edit: 🎉 Got it working on masterwith a custom ionic_dependency_tree config.

[chriswep]

Putting my webpack config additionally to "ionic_dependency_tree" in package.json solved the issue for me.

It stills feels like a bug though.

[Nilos]

Just copying your config over will not make the optimization step work correctly though. You would still have to change the module loader for ts/js files to the custom optimization loader (I guess?)

This feels less like a bug and more like a breaking change to me. On the other hand, the error until now was just swallowed (webpack errors were not reported) and optimization was thus "skipped")

Commit that broke this: https://github.com/driftyco/ionic-app-scripts/commit/3df19bf4ea1ffc065b7c7cfd7be2371d28e4c30d

[chriswep]

well there definitely is something off here. i'm just saying that for my special setup and webpack config it works for now if do this in package.json:

        "ionic_webpack": "./webpack.config.js",
        "ionic_dependency_tree": "./webpack.config.js",

The dev build ignores the dependency tree setting, the prod build ignores the ionic_webpack one. Both build run fine now and produce the desired (working) outcome.

Maybe @danbucholtz can you shed some light on why this is working? I expect that in a future version of app-scripts the production build will also load the ionic_webpack config? Or is it indeed supposed to work like that now?

[biesbjerg]

@metzc That's strange! Works for me too 👍

[wolfljj]

maybe the issue caused by each page moudle,delete page moudle then test

[aszmyd]

So it seems like the optimization task config name should be renamed to be consistent with other ones: https://github.com/ionic-team/ionic-app-scripts/blob/master/src/optimization.ts#L198

So instead of ionic_dependency_tree it should be named ionic_optimization and probably this information should be added to Readme as well as i've also looked for solution for few hours.

[russcarver]

This still appears to be an issue with "@ionic/app-scripts": "1.3.8" Adding "ionic_dependency_tree": "./webpack.config.js" doesn't help (I already had the ionic_webpack line).

[danbucholtz]

What is ionic_dependency_tree and why does that work? lol. 😆 I seriously am confused.

Our optimization step presently runs Webpack, and then the webpack step runs Webpack again. The rest for this is by running the bundler in the optimize step, we can identify what parts of Ionic are not used in the app and remove them. I am working with the Angular team on how they can improve the NGC compiler to do this automatically.

Thanks, Dan

[vkniazeu]

Downgrading to 1.3.4 still saves the day.

[russcarver]

I finally got it working by downgrading to 1.3.4 and also downgrading to @ionic/cli-plugin-ionic-angular@1.3.0 (I'm using Ionic 3.4.0) as 1.3.1 for that depends on at least 1.3.7 of app-scripts.

[fiznool]

@danbucholtz do you have any news on when this might be fixed? I'm stuck on 1.3.4 until it is!

[Nilos]

If you have a custom webpack config, this is not a bug. It is a sign of the optimization step failing because it uses the default webpack config and you will have to change your package.json to fix it.

The easy solution is to add an ionic_dependency_tree entry to your package.json - config with just the same value as your ionic_webpack.

This should make the build work again but would likely still break the optimization step (but now silently).

[fiznool]

Thank you @Nilos - I did not realise there was a workaround. I've just tried that and it works perfectly.

[danbucholtz]

@fiznool,

What exactly is the issue? Sorry, I'm not really following. I don't know where ionic_dependency_tree comes from. I don't believe that is a real property, and if it is, it is a typo on our end.

Thanks, Dan

[mxth]

@danbucholtz

I got this after doing a simple search through repo. Not sure if it's related.

https://github.com/ionic-team/ionic-app-scripts/blob/4b538c73305a0a43aa9cdd539bcc36578768afaa/src/optimization.ts#L198

[danbucholtz]

Ahhh, yes that is definitely a typo. I dunno how that happened. Will fix.

You probably don't want to use a custom config for the optimization step. I'm not sure what the value would be. It's just happenstance that it uses Webpack, that's why we don't talk much about it, etc.

Thanks, Dan

[fiznool]

@danbucholtz with the help of other answers from this thread, I've put together a sample repo which shows the issue: https://github.com/fiznool/ionic-prod-flag-tester

The webpack custom config files in this example are used to support project-relative imports, e.g. import { HomePage } from 'src/pages/home/home';. As you can see, two custom config files are needed, one for the optimization step, and one for the webpack step. The config files are wired into the Ionic build process through the config property in package.json. If you remove the ionic_dependency_tree property from this config block, and run npm run build --prod, you'll see lots of errors, as the optimization stage can't resolve the imports beginning with src/.

As you've described in this thread, app scripts currently runs webpack twice - once for optimization, then once for bundling, but you are exploring ways that this could be achieved in a single step with the angular folks? In this case, I guess this is just a necessary piece of config that is unavoidable for the time being. May I therefore suggest that this is documented somewhere in the app scripts readme? I'm happy to provide a PR for this if needed.

[chriswep]

What exactly is the issue? Sorry, I'm not really following.

@danbucholtz just to sum up: custom webpack configs are not loaded in production builds > 1.3.4 (at least for a lot of people). at some point @Nilos found out about the optimisation step and the corresponding config property ionic_dependency_tree. I then just tried to throw my current webpack config at this as well. This works for me and apparently for some other people as well and seems to be the only working solution right now to use a custom webpack config > 1.3.4.

So if you remove this property, please only do it when the default webpack config is working again ;-)

[danbucholtz]

Will fix tonight. Sorry everyone, this is definitely a typo.

Thanks, Dan

[danbucholtz]

npm install @ionic/app-scripts@nightly. Should have webpack scope hoisting in too 🎉

Here's the commit

Here's the fix for the typo.

Please let me know if this isn't working as expected.

Thanks, Dan

[chriswep]

Please let me know if this isn't working as expected.

@danbucholtz actually the typo is not the real issue here, i think it bothered you more than the rest of us ;-) - the problem is that custom webpack configs (via ionic_webpack) are not loaded when building in production mode. Unless it is supposed to be like that now (having to set your webpack config to ionic_optimization as well as ionic_webpack). If its not, then this ticket should stay open. If yes, then i would agree with some others here that this is now a confusing situation and needs documentation.

[danbucholtz]

The optimization part of webpack is purely for building a dependency tree. It just happens to run Webpack. It could just as easily run Rollup, or even a custom tool. I am not clear on why this part needs to be customized.

Is the build process failing on the webpack step, or the optimization step? What sort of customization? If it just simply not finding the file? I will take a look at this tonight.

Thanks, Dan

[fiznool]

@danbucholtz please refer to my previous comment for a sample repo which shows the problem. The most common issue I can gather from this thread is for customising the webpack resolver so you can write

import { HomePage } from 'src/pages/home/home';

instead of

import { HomePage } from '../../pages/home/home';

Obviously if code is written using the former syntax, any webpack processing needs to include the custom resolver configuration. This is why (currently) you need 2 custom webpack files when building with the --prod flag - one for optimization, and one for bundling.

[chriswep]

@danbucholtz because you asked: the build is failing on the optimization step. @fiznool explained why.

Contrary to what i thought first, the problem is not that the webpack step ignores the custom config file but that there is an additional (webpack-)optimization step before it that is failing, because it misses the custom configs that the project depends on. Thats why it started to work when we added the config to the optimisation step (which i only understand now why).

If i think about it, it may be necessary to keep having two separate configuration options. If the "normal" config e.g. does some copy tasks, we wouldn't want that to be done in the optimisation step. We just need the stuff there that is needed for the code to "compile" properly.

Again, in that case the documentation should make clear that both steps need to be configured in a lot of use cases.

The optimization part of webpack is purely for building a dependency tree. It just happens to run Webpack. It could just as easily run Rollup, or even a custom tool. Considering the issue at hand, i think using a different bundler here would make the situation much more difficult for people with custom configs.

[Xepe]

Hello,

I think that ionic_optimization config should be added in the README

Thanks @danbucholtz Regards.

[JoeMeeks]

@Xepe @metzc @fiznool @danbucholtz with @ionic/app-scripts 2.0.0 you can use the --optimization flag per https://github.com/ionic-team/ionic-app-scripts/blob/v2.0.0/src/optimization.ts.

So the package.json build script for my "mpm" app looks like this:

"build:mpm": "ionic-app-scripts build --copy src/app/mpm/config/copy.config.js --sass src/app/mpm/config/sass.config.js --appNgModulePath src/app/mpm/app.module.ts --appEntryPoint src/app/mpm/main.ts --tsconfig src/app/mpm/config/tsconfig.json --webpack src/app/mpm/config/webpack.config.js --optimization src/app/mpm/config/optimization.config.js --enableLint false --prod",

However, now I get a webpack error after optimization completes successfully but without the --prod argument builds still work fine.