Menu
I am building my Ionic application for production. To do so, I am using ionic build --prod command and the application is building successfully, But when I am running my application on the server then it is giving me errors of:
cordova.js, main.js, Vendor.js.
(Please ignore the errors of Firebase)
The screenshot of network tab is:
As I am seeing my build folder, there are only two files that are generated after running the above ionic command i.e Pollyfills.js and 'sw-toolbox.js'.
But when I am using Ionic serve command then the build folder consists of all the files viz Pollyfills.js, main.js, main.css, vendor.js and 'sw-toolbox.js'.
I have already tried the various commands like :
ionic cordova build android --prod --release but it also results in only two files in Build folder and hence giving an error on console.
What is the issue and how can I make this app suitable for production mode.
Kindly have a look on my index.html file where I am giving the paths of various js files:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>BOS</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#000">
<!--Share this Code -->
<script src="//platform-api.sharethis.com/js/sharethis.js#property=5b1fb235e4b7fb00118c596f&product=sticky-share-buttons"></script>
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href= "assets/imgs/logoSplash.png",>
<link rel="apple-touch-startup-image" href="assets/imgs/logoSplash.png">
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>
<link rel="preload" href="build/main.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<noscript>
<h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
Sorry, but app is not available without javascript
</h3>
</noscript>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
943
ionic build uses the Angular CLI. Use ng build --help to list all Angular CLI options for building your app.
I have found the solution of my problem. I went to the node_modules -> @ionic -> app-scripts -> config -> webpack.config
In that file, I had commented one line of code :
function getProdLoaders() {
if (process.env.IONIC_OPTIMIZE_JS === 'true') {
// return optimizedProdLoaders; <= This one
}
return devConfig.module.loaders;
}
Now, it is working.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With