When I deploy my ionic 2 application on the production server, I am getting the errors below. But when I run the application on the localhost, it runs fine.
vendor.js:1349 Uncaught SyntaxError: Unexpected token ?
main.js:1 Uncaught ReferenceError: webpackJsonp is not defined
at main.js:1
Below is my index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script data-ionic="inject">
(function(w){var i=w.Ionic=w.Ionic||{};i.version='3.9.2';i.angular='5.0.3';i.staticDir='build/';})(window);
</script>
<meta charset="UTF-8">
<title>Ionic App</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=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="cordova.js"></script>
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<ion-app></ion-app>
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script>
<script src="build/main.js"></script>
</body>
</html>
This is my package.json:
{
"name": "WJC",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"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": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/core": "4.4.0",
"@ionic-native/in-app-browser": "^4.5.3",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/storage": "2.1.3",
"cordova-plugin-inappbrowser": "^2.0.2",
"ionic-angular": "3.9.2", <=== latest
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.8",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-inappbrowser": {}
}
}
}
I'm not sure if I am using some un-compatiable version types.
I copy the contents of my www folder into my Web application, then I make a war file and deploy on my server running tomcat. Ionic build comes from
ionic serve
Then for war file I do maven install.
This package.json seems to be working, this is from another app which I created few months ago. As you can see that here ionic version is a bit older than the latest one I'm using which is referenced in the app that's not working.
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"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/animations": "^4.2.3",
"@angular/common": "^4.2.3",
"@angular/compiler": "^4.2.3",
"@angular/compiler-cli": "^4.2.3",
"@angular/core": "^4.2.3",
"@angular/forms": "^4.2.3",
"@angular/http": "^4.2.3",
"@angular/platform-browser": "^4.2.3",
"@angular/platform-browser-dynamic": "^4.2.3",
"@angular/platform-server": "^4.2.3",
"@angular/router": "^4.2.3",
"@ionic-native/core": "^3.12.1",
"@ionic-native/splash-screen": "^3.12.1",
"@ionic-native/status-bar": "^3.12.1",
"@ionic/storage": "2.0.0",
"angular2-moment": "^1.3.3",
"angularfire2": "^4.0.0-rc.0",
"cordova-android": "^6.3.0",
"cordova-plugin-browsertab": "^0.2.0",
"cordova-plugin-buildinfo": "^2.0.1",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-inappbrowser": "^1.7.2",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.1",
"cordova-plugin-whitelist": "^1.3.1",
"cordova-universal-links-plugin": "^1.2.1",
"firebase": "4.1.0",
"ionic-angular": "^3.4.2", <=== Older
"ionic-native": "2.4.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"material-design-icons": "^3.0.1",
"moment": "^2.18.1",
"moment-timezone": "^0.5.13",
"ng2-pdf-viewer": "^2.0.2",
"noman.arain.plugin": "file:../noman.arain.plugin",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"typescript": "^2.5.3",
"zone.js": "0.8.12"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.7",
"@types/moment": "^2.13.0",
"@types/moment-timezone": "^0.2.34",
"ionic": "3.7.0",
"typescript": "^2.3.4"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "myAwesomeApp: An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-splashscreen": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-console": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"noman.arain.plugin": {},
"cordova-plugin-buildinfo": {},
"cordova-universal-links-plugin": {},
"cordova-plugin-browsertab": {},
"cordova-plugin-inappbrowser": {}
},
"platforms": [
"android"
]
}
}
My question has nothing to do with the serviceWorker.
I do not want to run these two commands:
ionic cordova platform add browser
ionic build browser --prod --release
ionic serve should suffice when I want to deploy my app. Please remove this as the duplicate of the other.
