main.css missing when I build with --prod #1114

squallliu · 2017-07-14T02:04:36Z

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

main.css missing when I build with --prod and "ionic_manual_treeshaking" set false

What behavior are you expecting?

the size of main.css is 42K

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

danbucholtz · 2017-07-14T02:41:11Z

@squallliu,

Please do not delete our form. You are missing a good amount of required data.

How can I recreate this issue? Please upload a sample repository.

Thanks,
Dan

squallliu · 2017-07-14T03:00:00Z

@danbucholtz

clone https://github.com/squallliu/app-scripts-test
npm i
build with --prod

styles are missing

lordgreg · 2017-07-14T21:17:35Z

I can confirm this issue as well.

$ ionic info

global packages:

    @ionic/cli-utils : 1.6.0-alpha.18371e18
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.6.0-alpha.18371e18

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.11.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0

as soon as remove the --prod flag, the styling looks okay.

MarkChrisLevy · 2017-07-16T09:41:06Z

@danbucholtz I can confirm this as well.

vkniazeu · 2017-07-18T17:20:55Z

The issue is NOT present with "@ionic/app-scripts": "^2.0.0".

vkniazeu · 2017-07-18T17:21:08Z

#1120 is related.

lordgreg · 2017-07-18T19:20:13Z

@vkniazeu I've just checked your statement with 2.0.2 version installed and it still produced the same issue.

$ ionic info

global packages:

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

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.11.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0

danbucholtz · 2017-07-19T04:06:52Z

@squallliu,

I'll test your project out and verify. It could be a Windows thing. Though I did test some apps on windows. Hmmm.

Thanks,
Dan

bsummersgb · 2017-07-19T06:10:55Z

I'm also experiencing this on OSX

squallliu · 2017-07-19T06:19:06Z

@danbucholtz

global packages:

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

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v8.1.4
    OS         : macOS Sierra
    Xcode      : Xcode 8.3 Build version 8E162
    ios-deploy : not installed
    ios-sim    : 5.0.13
    npm        : 4.6.1

vkniazeu · 2017-07-19T07:28:52Z

@lordgreg, 2.0.2 does give me an error. It's 2.0.0 that works fine for me. FWIW, I'm on Windows.

danbucholtz · 2017-07-19T15:40:24Z

@squallliu and others,

I can recreate the issue in @squallliu's sample project. I noticed that it has the following config setting:

"config": {
    "ionic_manual_treeshaking": false
  }

Are you all using this setting as well? If I remove this setting, everything works as expected.

Thanks,
Dan

lordgreg · 2017-07-19T15:41:54Z

HI Dan,

I don't have this setting at all:

{
  "name": "abcdef-ionic",
  "app_id": "",
  "type": "ionic-angular"
}

danbucholtz · 2017-07-19T15:45:08Z

@lordgreg,

Can you check your package.json? How can I recreate with your project set-up?

Thanks,
Dan

vkniazeu · 2017-07-19T15:50:09Z

@danbucholtz, no.
I do, however, have a custom webpack config related to #954 and #762 if this is relevant:

"config": {
    "ionic_optimization": "./src/config/webpack.config.js",
    "ionic_webpack": "./src/config/webpack.config.js"
}

danbucholtz · 2017-07-19T16:18:56Z

That could be part of it, too. Are you doing any custom resolving functionality? That is likely part of the problem I think. Can you modify the sass.js file in node_modules/@ionic/app-scripts/dist/sass.js around this line: https://github.com/ionic-team/ionic-app-scripts/blob/master/src/sass.ts#L112-L116

and add a console.log('moduleFile: ', moduleFile); inside of the forEach.

Please add the output to this thread.

Thanks,
Dan

vkniazeu · 2017-07-19T16:27:51Z

Yes, I'm resolving using an alias to have a working ENV solution for now while #762 is still being discussed. Here's my webpack.config.js. Coupled with the package.json config it lets me ionic serve and ionic cordova build browser --prod without any issues.

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
  useDefaultConfig.resolve.alias = {
    "@app/config": path.resolve('./src/config/config.' + process.env.IONIC_ENV + '.ts')
  };

  return useDefaultConfig;
}

You want me to add the log statement with 2.0.2, correct?

vkniazeu · 2017-07-19T17:02:28Z

@danbucholtz , sorry I'm confused as to where to find the output you are asking for.
I've upgraded to 2.0.2 (the problem is present), added the log line, but can't find the output anywhere when doing ionic cordova build browser --prod.

danbucholtz · 2017-07-19T19:33:01Z

@vkniazeu, can you check if context.moduleFiles is null or an empty array. That could be the problem in the sass.js file.

Thanks,
Dan

vkniazeu · 2017-07-20T09:59:13Z

@danbucholtz , context.moduleFiles comes up as undefined just before the forEach loop, so the latter is never executed.

B-Stewart · 2017-07-21T22:53:39Z

I seem to also be getting this behavior with the new version, but only when I run --prod with -l if that is helpful. I'm also on Windows.

ghost · 2017-07-25T12:59:36Z

I'm on OSX. I'm getting this behavior with the new version ( 2.0.2 and ionic-angular 3.5.3 ), but only when I run --prod --release. if that is helpful.

vkniazeu · 2017-07-26T10:29:43Z

Reproducible with 2.1.0.

danbucholtz · 2017-07-26T20:27:57Z

Is there anything unique about your apps? Can you recreate it if you start a new project:

ionic start myApp blank

Thanks,
Dan

vkniazeu · 2017-07-27T09:34:31Z

@danbucholtz, I'm not able to reproduce the issue with ionic start myApp blank with the default package.json, which uses "@ionic/app-scripts": "2.0.2" and "ionic-angular": "3.5.3" as of today.

I'm going to try to update all other outdated packages one by one to pinpoint the issue.
I do use a custom webpack config (see #1114 (comment)).

What about those questions you asked earlier about context.moduleFiles? Were my answers of any help?

Thank you!

ghost · 2017-07-29T09:45:39Z

@KillerCodeMonkey I use the same versions but not works.
package.txt

Behnam-r · 2017-08-02T06:28:31Z

I found the problem .. when you build with --prod in android all classes in main.css have a opacity of 0.4
if you remove opacity tick with inspect console(chrome) the work correctly .
i don't know how to fix it.

KillerCodeMonkey · 2017-08-02T11:29:59Z

strange... now it gets broken again... do not know what happened. After another production deploy the main.css is created but the list styling is broken.

Behnam-r · 2017-08-02T12:51:49Z

I found solution.
the problem is in variable.scss with number of color variables

#506

ionic-team/ionic-framework#9651

ghost · 2017-08-04T12:23:13Z

@Behnam-r I removed the $colors variable in the variables.scss, but it does not work yet.

sebaferreras · 2017-08-04T15:04:41Z

@Behnam-r I posted a comment before, using the tabs templates just like it is created by the CLI does not work properly, so it seems to be related to something else.

@danbucholtz have you been able to reproduce this issue on your end?

shivamsngh · 2017-08-07T16:58:27Z

hey guys i just ram into this problem and for me, after upgrading to below configuration, th problem is gone now, NOTE THAT THE ionic-angular VERSION is 3.6.0, that wa what missing for me , I had 3.5.3

Working for me now at,

cli packages:

ionic/cli-plugin-cordova : 1.6.2
ionic/cli-plugin-ionic-angular : 1.4.1
ionic/cli-utils : 1.7.0
ionic (Ionic CLI) : 3.7.0
global packages:

Cordova CLI : 7.0.1
local packages:

ionic/app-scripts: 2.1.3
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.6.0
System:

Android SDK Tools : 25.2.5
Node : v7.5.0
OS : macOS Sierra
npm : 4.1.2

ChomalCalcey · 2017-08-09T18:18:28Z

It's still there even with the following config. Prod breaks css :/

cli packages:

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.6.0

System:

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

KillerCodeMonkey · 2017-08-23T07:41:27Z

any updates here. I would like to build a prod build because of the smaller file size and execution performance.

But some styles are missing (e.g. lists)

summerchill · 2017-09-13T06:04:46Z

--prod build also loses css for me

alexyangjie · 2017-09-13T06:05:13Z

Same for me. Which version is the last working one?

lordgreg · 2017-09-13T06:08:33Z

I'm currently using the latest one and don't have the issue anymore.

KillerCodeMonkey · 2017-09-13T06:10:48Z

@lordgreg could you share your exact versions?

did you upgraded to the latest CLI? https://github.com/ionic-team/ionic-cli/blob/master/CHANGELOG.md

summerchill · 2017-09-13T06:11:41Z

Can you post your ionic info lordgreg?

I've got this

"scripts": {
 "serve-prod": "node --max_old_space_size=8096 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js serve --prod --release --aot",

and that:

alexyangjie · 2017-09-13T06:32:54Z

I manage to limit the problem to the --optimizejs flag. When running with this flag, some css files are missing.

lordgreg · 2017-09-13T16:09:50Z

Hi @KillerCodeMonkey, @summerchill, this is my command:

ionic cordova build android --release --prod --aot -- -- --keystore.........

and the ionic info:

cli packages: (C:\Development\__________\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.0
    npm               : 5.4.0
    OS                : Windows 10

KillerCodeMonkey · 2017-09-14T07:19:40Z

strange - does not work for me.

But there are only a view styles missing, like when i use ion-grid in ion-item. the widths are not correctly set.

Edit: if i set ion-label explicit to width 100%, everything looks fine *thinking

Also styles like: .label-md { margin: 13px 8px 13px 0; } are missing or the whole ion-label css block is missing

DavidWiesner · 2017-09-14T09:31:06Z

@danbucholtz here is my list of context.moduleFiles. For readability i only list the once for ionic-angular.
Log for ionic serve with --prod

moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/animations/animation.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/app-constants.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/menu-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/content/content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/ion.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/config/config.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/navigation/nav-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/navigation/nav-params.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/navigation/nav-util.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/navigation/view-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/platform/dom-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/platform/key.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/platform/keyboard.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/transitions/page-transition.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/transitions/transition.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/util/dom.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/util/scroll-view.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/util/util.js

But when run serve without --prod

moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/animations/animation.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/action-sheet/action-sheet-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/action-sheet/action-sheet-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/action-sheet/action-sheet-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/action-sheet/action-sheet.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/alert/alert-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/alert/alert-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/alert/alert-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/alert/alert.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/app-constants.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/app-root.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/app.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/click-block.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/menu-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/overlay-portal.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/avatar/avatar.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/backdrop/backdrop.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/badge/badge.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/button/button.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/card/card-content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/card/card-header.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/card/card-title.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/card/card.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/checkbox/checkbox.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/chip/chip.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/content/content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/datetime/datetime.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/fab/fab-container.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/fab/fab-list.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/fab/fab.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/grid/col.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/grid/grid.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/grid/row.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/icon/icon.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/img/img.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/infinite-scroll/infinite-scroll-content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/infinite-scroll/infinite-scroll.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/input/input.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/input/native-input.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/input/next-input.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/ion.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-divider.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-group.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-options.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-reorder-gesture.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-reorder-util.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-reorder.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-sliding-gesture.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-sliding.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/reorder.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/label/label.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/list/list-header.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/list/list.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/loading/loading-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/loading/loading-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/loading/loading-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/loading/loading.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/menu/menu-close.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/menu/menu-gestures.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/menu/menu-toggle.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/menu/menu-types.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/menu/menu.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/modal/modal-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/modal/modal-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/modal/modal-impl.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/modal/modal-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/modal/modal.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/nav/nav-pop-anchor.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/nav/nav-pop.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/nav/nav-push-anchor.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/nav/nav-push.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/nav/nav.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/note/note.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/option/option.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker-column.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker-options.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/popover/popover-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/popover/popover-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/popover/popover-impl.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/popover/popover-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/popover/popover.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/radio/radio-button.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/radio/radio-group.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/range/range-knob.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/range/range.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/refresher/refresher-content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/refresher/refresher.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/scroll/scroll.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/searchbar/searchbar.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/segment/segment-button.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/segment/segment.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/select/select-popover-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/select/select.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/show-hide-when/display-when.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/show-hide-when/hide-when.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/show-hide-when/show-when.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/slide.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/slides.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-a11y.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-classes.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-effects.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-events.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-index.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-keyboard.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-pagination.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-parallax.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-progress.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-transition.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-utils.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-zoom.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/spinner/spinner.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/split-pane/split-pane.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/tabs/tab-button.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/tabs/tab-highlight.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/tabs/tab.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/tabs/tabs.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/thumbnail/thumbnail.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toast/toast-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toast/toast-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toast/toast-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toast/toast.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toggle/toggle-gesture.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toggle/toggle.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/navbar.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar-base.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar-footer.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar-header.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar-item.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar-title.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/typography/typography.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/virtual-scroll/virtual-footer.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/virtual-scroll/virtual-header.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/virtual-scroll/virtual-item.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/virtual-scroll/virtual-scroll.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/virtual-scroll/virtual-util.js

If I understood this right, moduleFiles are all files that are used by the project. But when running production mode this list will be shrinked to the files the are imported directly by a script.
To verify this I add a log console.log('webpack.js after', context.moduleFiles && context.moduleFiles.length); to line 112 in webpack.ts#L112
with --prod webpack.js after 381
without --prod webpack.js after 663

And based on this you are trying to resolve all scss files you will need to import?! But most of the components are just used in the html files without being imported in any script. So trying to resolve the scss files based on the moduleFiles will not work. Thats should be the commit that introduce the issue.

Richie765 · 2017-09-17T11:19:32Z

@DavidWiesner, that is very helpful. Here's a work-around that works for me.

My problem is that the style of an ion-segment inside an ion-item is messed up. I use the same component in another project and there it works fine. With the inspector I saw that Ionic inserts an ion-label in the ion-item which lacks the proper styles.

I looked at context.moduleFiles and saw that the label module wasn't included. In my other project which works, it is included. The project that worked used ion-label in one of its templates while the other didn't.

I added the following in a template and now it works.

<ion-item *ngIf="false">
  <ion-label>Dummy</ion-label>
</ion-item>

damroyan · 2017-09-18T09:49:39Z

Any updates on this topic?

I still can't found a solution. There all ok with ionic cordova build android, all styles work fine. And zero styles when ionic cordova build android --prod --release.

`
ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.0.1

System:

ios-deploy : 1.9.1 
ios-sim    : 5.0.13 
Node       : v6.11.0
npm        : 4.2.0 
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b`

damroyan · 2017-09-19T16:58:26Z

UPD:

Not found what was happen with prod but found a life hack that solve problem with the build size and speed of Android app. Use next command to build app:

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

Idrimi · 2017-09-29T16:01:24Z

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

worked for me

https://github.com/ionic-team/ionic-app-scripts/blob/master/CHANGELOG.md

loganadhan-palanisamy · 2017-10-05T12:29:05Z

I have faced same CSS issue when I build with --prod and --release arguments
ionic cordova build android --prod --release
I found my @ionic/app-scripts version was 2.1.4 and it has some problem. So I upgraded it to latest version 3.0.0 and tried, it worked!.

marcosmlopes · 2017-10-09T20:55:12Z

Same issue here. I tried the following solutions without success:

tried downgrading ionic-app-scripts to 1.3.4,
upgrading to @latest or @nightly and
running ionic build --aot --minifyjs --minifycss && cordova run android --release with or without the --optimizejs flag and running ionic cordova run android --release --aot --minifyjs --minifycss

Strangely enough, if I don't run with the --release flag it seems to work... What the --release flag does under the hood?

ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-deploy : 1.9.2 
    Node       : v6.11.2
    npm        : 5.2.0 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9M214v

package.json

{
    "name": "myApp",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "config": {
        "ionic_sass": "./config/sass.config.js",
        "ionic_copy": "./config/copy.config.js"
    },
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "^4.4.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@angular/tsc-wrapped": "^4.4.4",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/google-analytics": "^4.2.1",
        "@ionic-native/in-app-browser": "^4.2.1",
        "@ionic-native/network": "^4.3.0",
        "@ionic-native/onesignal": "^4.2.1",
        "@ionic-native/social-sharing": "^4.2.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/pro": "^1.0.9",
        "@ionic/storage": "2.0.1",
        "autoprefixer": "^7.1.4",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-google-analytics": "^1.8.3",
        "cordova-plugin-inappbrowser": "^1.7.1",
        "cordova-plugin-network-information": "^1.3.3",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-plugin-x-socialsharing": "^5.2.0",
        "es6-promise-plugin": "^4.1.1",
        "font-awesome": "4.7.0",
        "ionic-angular": "3.6.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "jquery": "^3.2.1",
        "localforage": "^1.5.0",
        "localforage-cordovasqlitedriver": "^1.6.0",
        "moment": "^2.18.1",
        "onesignal-cordova-plugin": "^2.2.0",
        "postcss-value-parser": "^3.3.0",
        "rm": "^0.1.8",
        "rxjs": "5.4.0",
        "slick-carousel": "^1.7.1",
        "sw-toolbox": "3.6.0",
        "swiper": "^3.4.2",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^3.0.0",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "onesignal-cordova-plugin": {},
            "cordova-plugin-x-socialsharing": {},
            "cordova-plugin-google-analytics": {},
            "cordova-plugin-inappbrowser": {},
            "cordova-plugin-network-information": {}
        },
        "platforms": [
            "android",
            "ios"
        ]
    }
}

danbucholtz · 2017-10-13T18:49:19Z

Is this still an issue with 3.0.0?

Thanks,
Dan

sebaferreras · 2017-10-14T13:44:16Z

I was not able to reproduce it anymore @danbucholtz, so seems to be fixed on my end.

DavidWiesner · 2017-10-16T11:26:06Z

@danbucholtz update ionic-app-scripts 3.0.0 fix the issue in my case

niconaso · 2017-10-18T02:03:07Z

@danbucholtz yes! it's still happening, you can reproduce it with ionic-conference-app

Heckthor · 2017-10-30T04:27:53Z

Any update on this issue?

niconaso · 2017-10-30T11:08:58Z

@Heckthor yes! It's fixed in the final version 😃

vkniazeu mentioned this issue Jul 18, 2017

bug:ionic-app-scripts build --prod lost some css #1120

Closed

vkniazeu mentioned this issue Jul 18, 2017

AOT issue after upgrade to 2.0.2 #1112

Closed

danbucholtz self-assigned this Jul 19, 2017

jgw96 marked this as a duplicate of #1120 Jul 20, 2017

jgw96 added the needs_reply label Jul 20, 2017

main.css missing when I build with --prod #1114

main.css missing when I build with --prod #1114

Comments

squallliu commented Jul 14, 2017 • edited Loading

Short description of the problem:

What behavior are you expecting?

danbucholtz commented Jul 14, 2017

squallliu commented Jul 14, 2017

lordgreg commented Jul 14, 2017

MarkChrisLevy commented Jul 16, 2017

vkniazeu commented Jul 18, 2017

vkniazeu commented Jul 18, 2017

lordgreg commented Jul 18, 2017

danbucholtz commented Jul 19, 2017

bsummersgb commented Jul 19, 2017

squallliu commented Jul 19, 2017

vkniazeu commented Jul 19, 2017

danbucholtz commented Jul 19, 2017 • edited Loading

lordgreg commented Jul 19, 2017

danbucholtz commented Jul 19, 2017

vkniazeu commented Jul 19, 2017

danbucholtz commented Jul 19, 2017

vkniazeu commented Jul 19, 2017

vkniazeu commented Jul 19, 2017

danbucholtz commented Jul 19, 2017

vkniazeu commented Jul 20, 2017

B-Stewart commented Jul 21, 2017

ghost commented Jul 25, 2017

vkniazeu commented Jul 26, 2017

danbucholtz commented Jul 26, 2017

vkniazeu commented Jul 27, 2017 • edited Loading

ghost commented Jul 29, 2017

Behnam-r commented Aug 2, 2017

KillerCodeMonkey commented Aug 2, 2017

Behnam-r commented Aug 2, 2017 • edited Loading

ghost commented Aug 4, 2017

sebaferreras commented Aug 4, 2017

shivamsngh commented Aug 7, 2017 • edited Loading

ChomalCalcey commented Aug 9, 2017

KillerCodeMonkey commented Aug 23, 2017

summerchill commented Sep 13, 2017

alexyangjie commented Sep 13, 2017

lordgreg commented Sep 13, 2017

KillerCodeMonkey commented Sep 13, 2017

summerchill commented Sep 13, 2017

alexyangjie commented Sep 13, 2017

lordgreg commented Sep 13, 2017

KillerCodeMonkey commented Sep 14, 2017 • edited Loading

DavidWiesner commented Sep 14, 2017

Richie765 commented Sep 17, 2017

damroyan commented Sep 18, 2017 • edited Loading

damroyan commented Sep 19, 2017 • edited Loading

Idrimi commented Sep 29, 2017 • edited Loading

loganadhan-palanisamy commented Oct 5, 2017

marcosmlopes commented Oct 9, 2017 • edited Loading

danbucholtz commented Oct 13, 2017

sebaferreras commented Oct 14, 2017

DavidWiesner commented Oct 16, 2017

niconaso commented Oct 18, 2017

Heckthor commented Oct 30, 2017

niconaso commented Oct 30, 2017

squallliu commented Jul 14, 2017 •

edited

Loading

danbucholtz commented Jul 19, 2017 •

edited

Loading

vkniazeu commented Jul 27, 2017 •

edited

Loading

Behnam-r commented Aug 2, 2017 •

edited

Loading

shivamsngh commented Aug 7, 2017 •

edited

Loading

KillerCodeMonkey commented Sep 14, 2017 •

edited

Loading

damroyan commented Sep 18, 2017 •

edited

Loading

damroyan commented Sep 19, 2017 •

edited

Loading

Idrimi commented Sep 29, 2017 •

edited

Loading

marcosmlopes commented Oct 9, 2017 •

edited

Loading