When building a production version of my Ionic application I am running with:
ionic build --prod --release
However a number of the CSS styles appear to be missing in this production version of the application.
I noticed the same happens with a simple tabs application i.e.
Running ionic serve styles the application correctly.
Is there something that needs to be done for a production version of the app ?
I am using version 3.7.0 of the ionic cli
I noticed if |I downgrade the version of app-scripts to 1.3.12 then a release build works as expected with all styling included.
Is this a known bug ?
I noticed that too, to my project i had to add some buttons to toast controller, so i had to extends the toast controller, without --prod it work correctly, but with the --prod simply doesn`t add the required css from the toast,
I am using ionic cli 3.7.0 too…
Please post the ionic info of the project when you get the bug, best one of the starters so it is easy for us to replicate (tabs you say?)
Environment
OS: Mac OS 10.12.6 / Windows 7
Ionic CLI: 3.7.0
Ionic Info
cli packages: (/Users/neil/Work/Test/test/node_modules)
@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 : none
Ionic Framework : ionic-angular 3.6.0
System:
Node : v6.9.2
OS : macOS Sierra
Xcode : Xcode 8.2.1 Build version 8C1002
ios-sim : 5.0.13
npm : 4.0.5
Re-creating the Issue
Issue Description
When running the application with the --prod and --release tags then the default ionic styling is missing from the application which means the layout is incorrect.
Running without --prod --release works correctly
Notes
Downgrading the version of app-scripts to 1.3.12 works correctly.
Issue is also present with the latest version of app-scripts (2.1.3)
Thanks, I will play with that.
Does it make a difference if you leave the --release and only use --prod? How about only --release?
(I think --release should do nothing at all here)
Okay, after some investigation:
Both --prod and --release are not valid commands of ionic serve, see here:
https://ionicframework.com/docs/cli/serve/
Are you really seeing this issue with ionic serve?
What browser are you using?
Does it happen on Windows and Mac?
ionic serve --prod --release => Missing Styles
ionic serve --prod => Missing Styles
ionic serve --release => Working
ionic serve => Working
I was actually trying to do a build with :
ionic build browser --prod --release
With the hope this would produce a minified and obfuscated version of my application capable of running in a browser. I dropped back to using ionic serve when I noticed that the styling was missing when using the --prod --release parameters.
Browser : Chrome 59.0.3071.115
I can confirm I see the same issue on both a Windows 7 and MacOS 10.12.6 OS
Can you run it with missing styles, backup the www somewhere, then run with working styles, and compare the new www to the old folder? Use Winmerge or a similar program.
(I can not replicate the problem locally - I get tab iocns and normal styling with each one of these commands)
I have created the www folder both with working styles and with broken styles available here : https://expirebox.com/download/bac0753fbf4f0b0ac1dab17193eae967.html
When comparing the main.css I notice in the broken styles the css class from ion-action-sheet onwards are missing
After your point about --prod --release not being supported in the ionic serve command I retried this with : ionic build browser --prod --release and served via Apache and it works fine !
So seems the issue is only applicable to ionic serve, so whilst it’s odd that ionic serve does something different with this parameters it is now a non issue!
Thanks for looking into this
Quite a lot of CSS is missing… really strange.
Can you post the output of both command you get on the console please? (The build command stuff from app-scripts…)
ionic serve --prod --release (Broken styling)
S:\ionic\test2>ionic serve --prod --release
[INFO] Starting app-scripts server: --prod --release --port 8100 --p 8100 --livereload-port 35729 --r 35729 --address
localhost - Ctrl+C to cancel
[14:01:29] watch started …
[14:01:29] build dev started …
[14:01:29] clean started …
[14:01:29] clean finished in 3 ms
[14:01:29] copy started …
[14:01:29] transpile started …
[14:01:32] transpile finished in 3.25 s
[14:01:32] preprocess started …
[14:01:32] deeplinks started …
[14:01:32] deeplinks finished in 12 ms
[14:01:32] preprocess finished in 15 ms
[14:01:32] webpack started …
[14:01:33] copy finished in 3.60 s
[14:01:44] webpack finished in 11.71 s
[14:01:44] sass started …
[14:01:44] sass finished in 202 ms
[14:01:44] postprocess started …
[14:01:44] postprocess finished in 10 ms
[14:01:44] lint started …
[14:01:44] build dev finished in 15.24 s
[14:01:45] watch ready in 15.40 s
[14:01:45] dev server running: http://localhost:8100/
[INFO] Development server running
Local: http://localhost:8100
[14:01:47] lint finished in 2.71 s
ionic serve (Working styling)
S:\ionic\test2>ionic serve
[INFO] Starting app-scripts server: --port 8100 --p 8100 --livereload-port 35729 --r 35729 --address localhost - Ctrl+C
to cancel
[14:02:36] watch started …
[14:02:36] build dev started …
[14:02:36] clean started …
[14:02:36] clean finished in 10 ms
[14:02:36] copy started …
[14:02:36] transpile started …
[14:02:39] transpile finished in 3.07 s
[14:02:39] preprocess started …
[14:02:39] deeplinks started …
[14:02:39] deeplinks finished in 10 ms
[14:02:39] preprocess finished in 12 ms
[14:02:39] webpack started …
[14:02:39] copy finished in 3.51 s
[14:02:46] webpack finished in 7.31 s
[14:02:46] sass started …
[14:02:48] sass finished in 1.16 s
[14:02:48] postprocess started …
[14:02:48] postprocess finished in 8 ms
[14:02:48] lint started …
[14:02:48] build dev finished in 11.62 s
[14:02:48] watch ready in 11.79 s
[14:02:48] dev server running: http://localhost:8100/
[INFO] Development server running
Local: http://localhost:8100
Looks like the same output to me.
(Just making sure you noticed my last comment that this actually works with ionic build, and so is not really an issue anymore)
Saw that, am just curious now what is happening. Because the build process is identical, both dev builds. Super strange.
See this update on the issue I created about this:
https://github.com/ionic-team/ionic-cli/issues/2625#issuecomment-322332404
Hi @neilsherman,
We had the same problem.
Try updating ionic-angular:
npm install ionic-angular@latest --save
That worked for us 