ionic-team / ionic-app-scripts

App Build Scripts for Ionic Projects
http://ionicframework.com/
MIT License
609 stars 300 forks source link

Ionic build --prod freezes after webpack started, copy finished... #1426

Open Bengejd opened 6 years ago

Bengejd commented 6 years ago

Short description of the problem:

When running ionic cordova build ios --prod the command starts running, but then (seemingly) stops after

21:14:41]  build prod started ... 
[21:14:41]  clean started ... 
[21:14:41]  clean finished in 2 ms 
[21:14:41]  copy started ... 
[21:14:41]  deeplinks started ... 
[21:14:41]  deeplinks finished in 311 ms 
[21:14:41]  ngc started ... 
[21:14:57]  ngc finished in 15.79 s 
[21:14:57]  preprocess started ... 
[21:14:57]  preprocess finished in less than 1 ms 
[21:14:57]  webpack started ... 
[21:14:57]  copy finished in 16.44 s 

What behavior are you expecting?

For the build process to continue, like it does when you run ionic cordova build ios

Steps to reproduce:

  1. Run the above mentioned command with the prod flag.

Package.Json

  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@firebase/app": "^0.1.10",
    "@ionic-native/camera": "^4.7.0",
    "@ionic-native/camera-preview": "^4.7.0",
    "@ionic-native/core": "^4.7.0",
    "@ionic-native/diagnostic": "^4.7.0",
    "@ionic-native/geolocation": "^4.7.0",
    "@ionic-native/google-maps": "^4.7.0",
    "@ionic-native/onesignal": "^4.7.0",
    "@ionic-native/photo-library": "^4.7.0",
    "@ionic-native/splash-screen": "^4.7.0",
    "@ionic-native/status-bar": "^4.7.0",
    "@ionic/storage": "^2.1.3",
    "algoliasearch": "^3.26.0",
    "angular2-click-outside": "^0.1.0",
    "angularfire2": "^5.0.0-rc.6",
    "animate.css": "^3.6.1",
    "branch-cordova-sdk": "^2.6.24",
    "cordova-ios": "4.5.4",
    "cordova-plugin-add-swift-support": "^1.7.2",
    "cordova-plugin-camera": "^4.0.2",
    "cordova-plugin-camera-preview": "git+https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-file": "^5.0.0",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
    "cordova-plugin-ionic-webview": "^1.2.0",
    "cordova-plugin-keyboard": "^1.2.0",
    "cordova-plugin-mauron85-background-geolocation": "^2.3.5",
    "cordova-plugin-photo-library": "^2.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.0",
    "cordova.plugins.diagnostic": "^4.0.5",
    "css-animator": "^2.3.0",
    "date-fns": "^1.29.0",
    "firebase": "^4.13.1",
    "firebase-tools": "^3.18.4",
    "geofire": "^4.1.2",
    "geofirestore": "^1.0.1",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "jimp": "^0.2.27",
    "lodash": "^4.17.5",
    "ng-click-outside": "^3.2.0",
    "ng2-rx-componentdestroyed": "^2.1.0",
    "npm": "^5.8.0",
    "onesignal-cordova-plugin": "^2.3.3",
    "rxjs": "^5.5.10",
    "sharp": "^0.20.1",
    "sw-toolbox": "3.6.0",
    "sweetalert": "^2.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.9",
    "@types/lodash": "4.14.106",
    "typescript": "^2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "branch-cordova-sdk": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": "To take photos",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "To select photos"
      },
      "cordova-sqlite-storage": {},
      "onesignal-cordova-plugin": {},
      "cordova-plugin-add-swift-support": {},
      "cordova-plugin-photo-library": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "To choose photos"
      },
      "cordova-plugin-keyboard": {},
      "cordova-plugin-camera-preview": {},
      "com.googlemaps.ios": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "AIzaSyCqDppTYeY_1kjBBCorBhkscqgJZ1F_lcg",
        "API_KEY_FOR_IOS": "AIzaSyCqDppTYeY_1kjBBCorBhkscqgJZ1F_lcg",
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "To find people nearby",
        "LOCATION_ALWAYS_USAGE_DESCRIPTION": "To find people nearby"
      },
      "cordova-plugin-mauron85-background-geolocation": {
        "ALWAYS_USAGE_DESCRIPTION": "To update your location"
      },
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To find things nearby"
      }
    },
    "platforms": [
      "ios"
    ]
  }
}

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

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

This was seemingly fixed in the 3.1.9 update of @ionic/app-scripts. But I'm still running into this issue after upgrading from 3.1.8.

ayaka209 commented 6 years ago

+1 here, tried to add max_old_space_size parameter, upgrade @ angular-devkit/build-optimizer, ,.. still spends much time

bnfrnz commented 6 years ago

I'm facing the same issue. Wasted days on trying to build with --prod. Made sure all imports are deep and accurate, increased memory size, stack size... basically tried all the advice I could find in the dozens of prod build related github issues I found across the various related repos... nothing helped. The prod build always freezes and all I can do is kill the process after a few hours.

Unfortunately, the README.md of this repo appears to be a bit outdated and not very helpful. The --cleancss and --uglifyjs flags for example don't seem to be supported by the latest version. I was trying to find out what exactly --prod actually does and it seems to me that it includes --optimizejs. I played around with the options and in my case this optimize script is the one that hangs.

@Bengejd, @ayaka209, If you also can't sort out the --prod build but urgently need a build, try leaving out --optimizejs option. I guess it's not ideal but for me it works and I just couldn't find another way.

Basically, instead of this ionic cordova build ios --prod do this ionic cordova build ios --aot --minifyjs --minifycss --release

Would be great to find out why exactly --optimizejs doesn't work for me and be able to fix it since it is my understanding that it's supposed to bring performance improvements...

ayaka209 commented 6 years ago

@bnfrnz thank you. but --aot --minifyjs --minifycss --release also takes much time on webpack. ( 400s )

I write a webpack.config.js and force it use ionic dev config for prod now: (./config/webpack.config.js)

var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
module.exports = function () {
  let defaultConfig = useDefaultConfig;
  defaultConfig["prod"] = defaultConfig["dev"];
    return defaultConfig;
};

then it takes 80s (--prod) instead of 2000s+ (--prod without any change)

( do not forget to add config to package.json )

  "config": {
    "ionic_bundler": "webpack",
    "ionic_webpack": "./config/webpack.config.js"
  },

just a workaround.

my app takes 30s+ on startup if I don't use aot.

Bengejd commented 6 years ago

@bnfrnz thanks for the tip, I tried it just now, and it seems to be running the build as it's supposed to. Kind of a bummer that it doesn't work with --prod, but oh well. Best regards!

Stradivario commented 6 years ago

Whaat @ayaka209 if you do this you will get JUST DEV so no need to run --prod argument :D whats the purpose ?

I have the same problem like you i try to put heap size on node more than 12 GB and Ionic consume all of it... but the build didn't succeed....

Stradivario commented 6 years ago

https://github.com/ionic-team/ionic-app-scripts/issues/1429

ayaka209 commented 6 years ago

@Stradivario benefit from aot and less build time than --aot

Stradivario commented 6 years ago

@ayaka209 i am sure you are talking about "benefit from --prod"

AOT - Ahead of Time Compilation (remove all unused imports) PROD - Only minify, concat, uglify without TreeShaking the bundle

My suggestion is try to use both --aot and --prod this will give you faster load of your application.

Regards, Kristiyan Tachev

ayaka209 commented 6 years ago

@Stradivario no, just aot. after replacing webpack config, concat, minify uglify is not done. they spend too much time..

Leonavas commented 6 years ago

+1

Demi-ob commented 6 years ago

+1

audacitus commented 6 years ago

@bnfrnz I really owe you a beer. I can't thank you enough for this workaround.

I have a project of about 20+ lazy loaded pages and had this issue using --prod after upping the memory to 12gb and waiting 2+ hours, I can confirm using --aot --minifyjs --minifycss vs prod workaround works for both web and android. I'm sure they'll fix it soon, but this works for me for now.

Thanks again!

Demi-ob commented 6 years ago

+1

LouAdrien commented 6 years ago

+1

LouAdrien commented 6 years ago

I was able to get the live deploy working by editing the package.json script (following the previous mentioned fix) like this :

  "scripts": {
...
    "build": "ionic-app-scripts build --aot --minifyjs --minifycss --release",
...
  },

However I would feel much better when a fix comes and I can just put back the normal --prod setup

nsaldarriagagluky commented 6 years ago

+1

freddiandrew commented 6 years ago

any update fix this issue? i still can`t build with --prod.

what is the benefit using this : "build": "ionic-app-scripts build --aot --minifyjs --minifycss --release",

if we compare with --prod?

Bengejd commented 6 years ago

The only difference is that we are not utilizing the “optimizeJs” flag, which prod adds to the flags you specified below. Otherwise, —prod sets all of your mentioned flags, plus optimizeJs.

Jordan

On May 17, 2018 at 8:29 PM, freddi Andrew notifications@github.com wrote:

any update fix this issue? i still can`t build with --prod.

what is the benefit using this : "build": "ionic-app-scripts build --aot --minifyjs --minifycss --release",

if we compare with --prod?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-app-scripts/issues/1426#issuecomment-390055871, or mute the thread https://github.com/notifications/unsubscribe-auth/ALLhVYrKX31NO0-MWZswLtjV9hiYxcXTks5tzhXTgaJpZM4TuudN .

bvamos commented 6 years ago

I had the same problem yesterday. After several month of development --prod builds stopped without any error message. Last message was: [21:38:15] copy finished in 18.14 s

After hours of looking for the problem, I've found this in C:\Users\user.ionic\daemon.log:

[ERROR] [2018-05-18T19:40:46.800Z] Could not get latest version of ionic. ... [ERROR] [2018-05-19T07:49:24.325Z] An error occurred while running npm view ionic dist-tags.latest --json (exit code 1): ... "summary": "getaddrinfo ENOTFOUND my-internal-npm-repo:443", ...

After I've fixed the connection to my internal npm repo, it works again.

Now log says:

[2018-05-19T07:51:43.216Z] Writing 7432 to daemon pid file (.\daemon.pid). [2018-05-19T07:51:43.229Z] Spinning up communication server on port 53818. [2018-05-19T07:51:43.518Z] Writing 53818 to daemon port file (.\daemon.port). [2018-05-19T07:51:59.741Z] Writing daemon file.

I understand that my situation with internal npm proxy is not usual, but the point is that it is not always related to memory handling.

GuilhermeBCC commented 6 years ago

+1 Probably a problem with Webpack 3. As Ionic 3 will not receive any more updates, what we have left is to wait for Ionic 4 or to build a slower and longer build with the above solution.

ze-termica commented 6 years ago

Who are getting the --prod freeze are using googlemaps too? I beleave that this problem is related with googlemaps.

GuilhermeBCC commented 6 years ago

Hello, I have a solution. comment the line:

function getProdLoaders() {
  if (process.env.IONIC_OPTIMIZE_JS === 'true') {
     //return optimizedProdLoaders; <==
  }
  return devConfig.module.loaders;
}

in node_modules/@ionic/app-scripts/config/webpack.config.js run the command normally: ionic cordova android --prod --release

mfahrul commented 6 years ago

This issue begin after firebase@4.13.0 & 4.13.1 downgrade your firebase to firebase@4.12.1. You can also use the latest firebase@5.0.3 and downgrade your @firebase/database to @firebase/database@0.2.1

This issue is on their github

bnfrnz commented 6 years ago

@GuilhermeBCC, I suspect what you're doing there is just a complicated approach to omitting the flag --optimizejs.

@mfahrul, thanks so much for referencing the issue from the firebase-js-sdk repo. This finally did the trick for me. Been fighting this for weeks.

For everyone who is using Firebase Realtime Database in their project, I highly recommend pinning your version to @firebase/database@0.2.1 and checking if that solves the problem, as advised by mfahrul.

I have no idea what updates have been made to @firebase/database between version 0.2.1 which was released 2 months ago and today. So I'm not actually sure which solution is better, downgrading or leaving out the optimizejs script during build.

@ze-termica, I'm not using googlemaps but it may still cause the problem in your case. Google's typings and libs are all over the place, unfortunately. Maybe try downgrading it as well and see if the issue was introduced in a recent version, as it happened in the case of firebase.

GuilhermeBCC commented 6 years ago

Firebase again. Firebase is a headache.

@bnfrnz Do you think it best to omit the flag --prod and send it to production ?? I crawled and found where the problem is that is in the optimization of Ionic. I tested it and if you do it will have the same apk as before. To write this for sure you have not tested and verified the difference.

mfahrul commented 6 years ago

@GuilhermeBCC No, Firebase is not a headache. I've been playing with firebase for a while and i think its a powerful platform. Honestly i prefer to use native npm firebase package on ionic instead of angularfire. I am not agree to omit the --prod flag to send the apk for production release. In my experiences, there is a speed difference between production and debug version of apk. Apk generated with --prod is much faster then debug version because it is optimized. So omitting the --prod or commenting the optimizedProdLoaders is not the best solution.

sengoontoh commented 6 years ago

+1

fthkrtl commented 6 years ago

+1

silverio commented 6 years ago

I reduced my build time using webpack-parallel-uglify-plugin. In my case, the minifyjs flag was the issue. My project was making 40+ min build times.

npm i --save-dev webpack-parallel-uglify-plugin

In the package.json modify the build script and add a new webpack config:

"scripts": {
    "build": "node --max-old-space-size=8192 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build --aot --minifycss --optimizejs --release"
  },
"config": {
    "ionic_webpack": "./config/webpack.config.js"
  }

Create a config folder in the root of your project and create the file webpack.config.js in it.

add the following to the created file:

const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
const ParallelUglifyPlugin = require('../node_modules/webpack-parallel-uglify-plugin');
const OPTIMIZE = process.env.IONIC_OPTIMIZE_JS;
if (OPTIMIZE) {
webpackConfig.prod.plugins.push(
        new ParallelUglifyPlugin({
            cacheDir: '.cache/',
            sourceMap: true,
            uglifyJS:{
                mangle: true,
                compress: {
                  toplevel: true,
                  pure_getters: true
                }
            }
          })
    )
}

With this config (ionic default compression options) I reduced my build time to around 30 min, but Ionic Pro fails if your build is above 30 min. So I started playing with the compression options.

const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
const ParallelUglifyPlugin = require('../node_modules/webpack-parallel-uglify-plugin');
const OPTIMIZE = process.env.IONIC_OPTIMIZE_JS;

if (OPTIMIZE) {

  webpackConfig.prod.plugins.push(
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      sourceMap: true,
      uglifyJS: {
        output: {
          comments: false
        },
        compress: {    
          booleans: false,
          collapse_vars: false,
          comparisons: false,
          hoist_funs: false,
          hoist_props: false,
          hoist_vars: false,
          if_return: false,
          inline: false,
          join_vars: false,
          keep_infinity: true,
          loops: false,
          negate_iife: false,
          properties: false,
          reduce_funcs: false,
          reduce_vars: false,
          sequences: false,
          side_effects: false,
          switches: false,
          top_retain: false,
          toplevel: false,
          typeofs: false,
          unused: false,
          drop_console:true,
          drop_debugger:true,        
          conditionals: true,
          dead_code: true,
          evaluate: true,
          pure_getters: true
        }
      }
    })
  )
}

I had to remove almost all compression, to get a quick build.. the built result was about 12 minutes.

to build the project run:

npm run build

and then run:

cordova build ios

I am still playing with the compression options. hope this helps.

peterlai107 commented 6 years ago

+1

saryuvc commented 5 years ago

I have tried all the solutions but still issue not resolved.the build process taking 2.5 hours

dharapvj commented 5 years ago

For what it is worth.. below option has worked for me perfectly. The issue manifests when you have too many lazy loaded modules. It was isolated in ModuleConcatenation plugin and was fixed in Webpack 3.11.0

  1. add webpack 3.11.0 explicitely in your ionic app. Ionic app-scripts would automatically then pick your webpack.
  2. set node options to give somewhat higher memory.. you can play with this number until you get your build created.
    npm i webpack@3.11.0 --save
    set NODE_OPTIONS=--max_old_space_size=3000
    ionic build --prod

    This option works for me with 28 modules right now.

Hope that helps some people.

bnfrnz commented 5 years ago

Thanks @dharapvj. Unfortunately it doesn't do the trick in my case.

I pinned down the exact module that seems to be causing the freeze for me. It's any version higher than @firebase/database@0.2.1 and there are plenty of other developers with that issue. Firebase is a great suite of products. I'm a fan. But when it comes to dependencies and typings it's quite frustrating. Every update breaks something. I wonder if there's some sort of ES import issue or circle reference or so. Unfortunately they looked into it and concluded that the issue is probably on Ionic's side.

Basically, I can't build any Firebase project with --prod flag anymore. All I can do is use --aot --uglifyjs --minifyjs --minifycss --release and hope that someone will eventually fix whatever is going wrong...

dharapvj commented 5 years ago

Aah..

Sorry you have different issue than mine i guess.

On Sat 14 Jul, 2018, 7:16 PM Ben, notifications@github.com wrote:

Thanks @dharapvj https://github.com/dharapvj. Unfortunately it doesn't do the trick in my case.

I pinned down the exact module that seems to be causing the freeze for me. It's any version higher than @firebase/database@0.2.1 and there are plenty of other developers with that issue. Firebase is a great suite of products. I'm a fan. But when it comes to dependencies and typings it's quite frustrating. Every update breaks something. I wonder if there's some sort of ES import issue or circle reference or so. Unfortunately they looked into it and concluded that the issue is probably on Ionic's side https://github.com/firebase/firebase-js-sdk/issues/714#issuecomment-401824137 .

Basically, I can't build any Firebase project with --prod flag anymore. All I can do is use --aot --uglifyjs --minifyjs --minifycss --release and hope that someone will eventually fix whatever is going wrong...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-app-scripts/issues/1426#issuecomment-405037151, or mute the thread https://github.com/notifications/unsubscribe-auth/AB1Pntmq2qmnKxrFIDSBpCTI4Y3bBGaVks5uGidqgaJpZM4TuudN .

nurul1a commented 5 years ago

Same issue.

If you want to look into my source code, you can download here: https://goo.gl/bpdtfk

(I explained my issue in detail here: https://forum.ionicframework.com/t/ionic-build-freezes-after-copy-finished-in/135640

bnfrnz commented 5 years ago

@everyone: Updating @angular-devkit/build-optimizer finally fixed it for me. Have a look at this comment and give it a try.

saryuvc commented 5 years ago

I have updated the app-scripts,web pack,angular 4 to 6 but still the problem persist.

jayordway commented 5 years ago

@saryuvc Did you just update app-scripts and not update the version of the angular-devkit/build-optimizer that it leverages?

saryuvc commented 5 years ago

yes i have updated the app scripts from 3.1.0 to 3.1.11.

jayordway commented 5 years ago

@saryuvc That wouldn't update the build-optimizer though. You have to update that in the ionic-script's package.json itself and npm install @angular-devkit/build-optimizer

saryuvc commented 5 years ago

ok let me try..thank you for reply

saryuvc commented 5 years ago

Hello @jayordway i have updated the angular-devkit/build-optimizer in ionic-script's package.json and app's package.json. the build time is approximate 1 hour and 35 min from 2.5 hour.please note i have 30 up different modules with different pages.i have removed all the modules and with centralised module the prod release build time is 4 mins. so i think it is a issue of lazy loaded page. also , M not using firebase.

any solution ? please help me for same

This is my package.json

"dependencies": { "@angular-devkit/build-optimizer": "0.6.8", "@angular/common": "6.0.9", "@angular/compiler": "6.0.9", "@angular/compiler-cli": "6.0.9", "@angular/core": "6.0.9", "@angular/forms": "6.0.9", "@angular/http": "6.0.9", "@angular/platform-browser": "6.0.9", "@angular/platform-browser-dynamic": "^6.0.9", "@ionic-native/app-center-crashes": "^4.10.0", "@ionic-native/call-number": "^4.10.0", "@ionic-native/camera": "^4.10.0", "@ionic-native/clipboard": "^4.10.0", "@ionic-native/contacts": "^4.10.0", "@ionic-native/core": "4.10.0", "@ionic-native/crop": "^4.10.0", "@ionic-native/file": "^4.10.0", "@ionic-native/google-plus": "^4.10.0", "@ionic-native/in-app-browser": "^4.10.0", "@ionic-native/keyboard": "^4.10.0", "@ionic-native/linkedin": "^4.10.0", "@ionic-native/native-storage": "^4.10.0", "@ionic-native/network": "^4.10.0", "@ionic-native/sms": "^4.10.0", "@ionic-native/social-sharing": "^4.10.0", "@ionic-native/splash-screen": "4.10.0", "@ionic-native/status-bar": "4.10.0", "@ionic-native/themeable-browser": "^4.10.0", "@ionic/storage": "^2.1.3", "@ngx-translate/core": "^10.0.2", "@ngx-translate/http-loader": "^3.0.1", "android": "0.0.8", "call-number": "^1.0.1", "clipboard": "^2.0.1", "cordova-android": "7.0.0", "cordova-clipboard": "^1.2.1", "cordova-plugin-appcenter-crashes": "^0.1.7", "cordova-plugin-appcenter-shared": "^0.1.7", "cordova-plugin-camera": "^4.0.3", "cordova-plugin-contacts": "^3.0.1", "cordova-plugin-crop": "^0.4.0", "cordova-plugin-device": "^2.0.2", "cordova-plugin-file": "^6.0.1", "cordova-plugin-ionic-keyboard": "^2.1.2", "cordova-plugin-ionic-webview": "^1.2.1", "cordova-plugin-network-information": "^2.0.1", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-themeablebrowser": "^0.2.17", "cordova-plugin-whitelist": "^1.3.3", "cordova-plugin-x-socialsharing": "^5.4.1", "cordova-sms-plugin": "^0.1.11", "cordova-sqlite-storage": "^2.3.3", "es6-promise-plugin": "^4.2.2", "ionic-angular": "3.9.2", "ionic-select-searchable": "^2.8.1", "ionicons": "4.2.4", "jquery": "^3.3.1", "mime-types": "^2.1.19", "mx.ferreyra.callnumber": "0.0.2", "ng2-translate": "^5.0.0", "raven-js": "^3.26.3", "rxjs": "^6.2.2", "rxjs-compat": "^6.2.2", "sw-toolbox": "3.6.0", "zone.js": "0.8.26" }, "devDependencies": { "@ionic/app-scripts": "3.1.8", "typescript": "2.7.2", "ws": "5.2.2" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-whitelist": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": {}, "cordova-sms-plugin": {}, "cordova-plugin-contacts": {}, "cordova-plugin-x-socialsharing": {}, "cordova-plugin-themeablebrowser": {}, "cordova-sqlite-storage": {}, "cordova-plugin-network-information": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-camera": {}, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-crop": {}, "mx.ferreyra.callnumber": {}, "call-number": {}, "cordova-clipboard": {}, "cordova-plugin-file": {}, "cordova-plugin-appcenter-crashes": {} },

Bengejd commented 5 years ago

So I opened this issue 84 days ago, and we still haven't had it addressed by the Ionic team, unfortunately. Running the following works (for me anyways). This seems to be an issue with large apps with multiple modules (as one would want for lazy loading purposes) as mentioned here, and firebase after a certain version which was addressed here as an ionic issue that Firebase was inadvertandly causing.

npm install @angular-devkit/build-optimizer@0.6.8 npm install webpack@3.11.0 npm install @ionic/app-scripts@3.1.11 node --max-old-space-size=8192 (You can play around with this number).

After running these commands, it finishes the webpack portion of the build in about 120s. And then continues through the rest of it without a hitch. My project has roughly lazy loaded 70+ modules in it. I'll post my current package.json below so that you can compare the packages you have to mine. This seems to be working with firebase@5.3.0 just fine.

"dependencies": {
    "@angular-devkit/build-optimizer": "^0.6.8",
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/base64": "^4.10.0",
    "@ionic-native/camera": "4.3.3",
    "@ionic-native/camera-preview": "^4.10.0",
    "@ionic-native/core": "4.9.1",
    "@ionic-native/file": "^4.10.0",
    "@ionic-native/geolocation": "^4.10.0",
    "@ionic-native/google-maps": "^4.9.1",
    "@ionic-native/keyboard": "^4.10.0",
    "@ionic-native/onesignal": "^4.10.0",
    "@ionic-native/splash-screen": "4.9.1",
    "@ionic-native/status-bar": "4.9.1",
    "@ionic/pro": "^1.0.20",
    "@ionic/storage": "2.1.3",
    "algoliasearch": "^3.29.0",
    "angularfire2": "^5.0.0-rc.11",
    "animate.css": "^3.6.1",
    "bourbon": "^5.1.0",
    "branch-cordova-sdk": "^3.0.0",
    "build": "0.1.4",
    "clg-color": "^1.1.2",
    "com-badrit-base64": "^0.2.0",
    "cordova-ios": "4.5.4",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-camera-preview": "git+https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "^2.3.8",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-photo-library": "^2.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "date-fns": "^1.29.0",
    "firebase": "^5.3.0",
    "geofirestore": "^1.2.0",
    "hammerjs": "^2.0.8",
    "ionic-angular": "3.9.2",
    "ionic-image-loader": "^5.0.5",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "lodash": "^4.17.10",
    "minimist": "^1.2.0",
    "ng-click-outside": "^4.0.0",
    "onesignal-cordova-plugin": "^2.4.1",
    "rxjs": "^5.5.11",
    "rxjs-compat": "^6.2.2",
    "sw-toolbox": "3.6.0",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.11",
    "@types/node": "^10.5.2",
    "typescript": "~2.6.2",
    "webpack": "^3.11.0"
  },
  "config": {
    "ionic_sass": "./config/sass.config.js"
  }

Just for continuity, here is my sass.config.js that could help speed up some build times (but not by a ton, I don't believe.


// https://www.npmjs.com/package/node-sass

module.exports = {

  /**
   * outputFilename: The filename of the saved CSS file
   * from the sass build. The directory which it is saved in
   * is set within the "buildDir" config options.
   */
  outputFilename: process.env.IONIC_OUTPUT_CSS_FILE_NAME,

  /**
   * sourceMap: If source map should be built or not.
   */
  sourceMap: false,

  /**
   * outputStyle: How node-sass should output the css file.
   */
  outputStyle: 'expanded',

  /**
   * autoprefixer: The config options for autoprefixer.
   * Excluding this config will skip applying autoprefixer.
   * https://www.npmjs.com/package/autoprefixer
   */
  autoprefixer: {
    browsers: [
      'last 2 versions',
      'iOS >= 8',
      'Android >= 4.4',
      'Explorer >= 11',
      'ExplorerMobile >= 11'
    ],
    cascade: false
  },

  /**
   * includePaths: Used by node-sass for additional
   * paths to search for sass imports by just name.
   */
  includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'node_modules/bourbon/core'
    // 'node_modules/bourbon/app/assets/stylesheets'
  ],

  /**
   * includeFiles: An array of regex patterns to search for
   * sass files in the same directory as the component module.
   * If a file matches both include and exclude patterns, then
   * the file will be excluded.
   */
  includeFiles: [
    /\.(s(c|a)ss)$/i
  ],

  /**
   * excludeFiles: An array of regex patterns for files which
   * should be excluded. If a file matches both include and exclude
   * patterns, then the file will be excluded.
   */
  excludeFiles: [
    /*  /\.(wp).(scss)$/i  */
  ],

  /**
   * variableSassFiles: Lists out the files which include
   * only sass variables. These variables are the first sass files
   * to be imported so their values override default variables.
   */
  variableSassFiles: [
    '{{SRC}}/theme/variables.scss'
  ],

  /**
   * directoryMaps: Compiled JS modules may be within a different
   * directory than its source file and sibling component sass files.
   * For example, NGC places it's files within the .tmp directory
   * but doesn't copy over its sass files. This is useful so sass
   * also checks the JavaScript's source directory for sass files.
   */
  directoryMaps: {
    '{{TMP}}': '{{SRC}}'
  },

  /**
   * excludeModules: Used just as a way to skip over
   * modules which we know wouldn't have any sass to be
   * bundled. "excludeModules" isn't necessary, but is a
   * good way to speed up build times by skipping modules.
   */
  excludeModules: [
    '@angular',
    'commonjs-proxy',
    'core-js',
    'ionic-native',
    'rxjs',
    'zone.js'
  ]

};
sameer05k21a0440 commented 5 years ago

Hi, When I run my application with ionic serve --lab freeze it like that message [INFO] Waiting for connectivity with ionic-app-scripts... [INFO] Waiting for connectivity with ionic-app-scripts... [INFO] Waiting for connectivity with ionic-app-scripts... [INFO] Waiting for connectivity with ionic-app-scripts... [INFO] Waiting for connectivity with ionic-app-scripts... [INFO] Waiting for connectivity with ionic-app-scripts...

Bengejd commented 5 years ago

@sameer05k21a0440 please post your package.json file so we can see what you are running. Did you follow the steps I listed above, and then it began freezing, or is this a seperate issue? If it is, I recommend opening a new issue, because the two are not linked (to my knowledge), though I haven't used ionic serve --lab in quite some time on my app, since It requires native functionality, and I haven't bothered implementing connecting classes quite yet.

ghost commented 5 years ago

I am stuck here, looks like same issue, can some one point to a solution that works

> ionic-app-scripts build --prod --target cordova --platform android
[13:54:07]  ionic-app-scripts 3.1.11 
[13:54:07]  build prod started ... 
[13:54:08]  clean started ... 
[13:54:08]  clean finished in 16 ms 
[13:54:08]  copy started ... 
[13:54:08]  deeplinks started ... 
[13:54:08]  deeplinks finished in 77 ms 
[13:54:08]  ngc started ... 
[13:54:36]  ngc finished in 28.17 s 
[13:54:36]  preprocess started ... 
[13:54:36]  preprocess finished in 2 ms 
[13:54:36]  webpack started ... 
[13:54:37]  copy finished in 29.07 s 

Ionic info

Ionic:

   ionic (Ionic CLI)  : 4.0.3 
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.0

System:

   Android SDK Tools : 25.2.5
   ios-deploy        : 1.9.1
   ios-sim           : 5.0.8
   NodeJS            : v8.11.3 
   npm               : 6.3.0
   OS                : macOS High Sierra
ghost commented 5 years ago

For me this worked

ionic cordova build android --aot --uglifyjs --minifyjs --minifycss --release

and takes 30 mins on MAC Book Pro :) good luck if you are on windows :)

germanriverahdez commented 5 years ago

Just downgrade to firebase@4.12.1.

This fix the problem for me.

saryuvc commented 5 years ago

Hello,

Please remove www folder,node modules,platforms, and npm install

please note : I have updated to ionic 4 and cordova 8.

this solved my issue.

ailsoncgt commented 5 years ago

Tks @germanriverahdez, your solution works for me