I wrote a simple SAPUI5 application and deployed it on our ABAP server with help of this blog entry.
It's working fine when the application is running on Tomcat. When I try to launch the application from the ABAP server, however, I get the following error:
I guess it has something to do with the name for the resources but I don't really understand it. The debugger points to the line where I call the index.js file:
data-sap-ui-oninit="module:hendrik/odatabench/index"
Here is the code of my index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-resourceroots='{
"hendrik.odatabench" : "./"
}'
data-sap-ui-oninit="module:hendrik/odatabench/index">
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Bootstrapping with the attribute sap-ui-oninit='module:...' is supported only as of UI5 1.54 (commit).
UI5 1.28 is quite an ancient version which is out of maintenance. Either update SAPUI5 library in your ABAP system or bootstrap the application by getting the UI5 resources from the CDN:
<script id="sap-ui-bootstrap"
src="https://ui5.sap.com/<version>/resources/sap-ui-core.js"
data-...
></script>
List of currently supported versions can be found here: https://ui5.sap.com/versionoverview.html
Related
i am trying to run my existing flutter application on web, after adding the support for web and adding firebase javascript code to my index.html, when i run the application on a browser i get this error
If you are serving your web app in a path other than the root, change
the href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order
for it to work correctly. Fore more details: *
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base -->
i have tried looking for solution online but i could not find any, i have tried following this https://flutter.dev/docs/development/ui/navigation/url-strategies but its not working for me please any help will be appreciated thanks
Bellow is my index.html file
<!DOCTYPE html>
<html>
<head>
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="st_anthony_app">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>st_anthony_app</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "xxxxxenter`enter code here`",
authDomain: "xxxxx",
databaseURL: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx",
appId: "xxxxx",
measurementId: "xxxxx"
};
firebase.initializeApp(firebaseConfig);
</script>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
I am writing a simple application in Web IDE Personal Edition which is to be deployed on On-Premise ABAP system.
App.view.xml
<mvc:View
controllerName="databinding1.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
>
<Button text="Submit"/>
<Input
value=""
placeholder="Full Name"
width="50%"
/>
</mvc:View>
Application Name : DataBinding1
Application is stored in "workspace" folder.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Data Binding1</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"databinding1": "./"
}'
></script>
<script>
sap.ui.getCore().attachInit(function () {
new sap.ui.core.ComponentContainer({
"name":"databinding1"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
Error Message in Console:
If I remove the controllerName from App.view.xml, then the view loads successfully.
You try to use the sdk provided by the sapui5 page, this is a request to another server which is not within the same system. The Error is a typical behaviour of the browser to prevent cross site scripting.
You can fix your issue with the sapui5 proxy resource servlet for your sap resource (also works for odata, but this is another servlet => simple proxy servlet).
You should setup a resource servlet. Within your application you have to distinguish if you should use the proxy or not, check out the link:
https://sapui5.hana.ondemand.com/#docs/guide/2d3f5fb63a2f4090942375df80abc39f.html
Remote path for sapui5 sdk stored within sap:
http://<yourdomain>/sap/public/bc/ui5_ui5/resources/sap-ui-core.js
Make sure to activate the repository in TA: SICF
default_host>public>bc>ui5_ui5 right click and press activate
For those who actually want to handle cross-origin resources while developing: Web IDE offers a proxy mechanism which we can leverage by adding destination files:
Connect Remote Systems in SAP Web IDE Personal Edition
Example of odata.org Destination File
For the question author:
[...] cannot load https://sapui5.hana.ondemand.com/resources/sap.ui.core.mvc.Controller.
That error message shows that the browser tried to load a file named sap.ui.core.mvc.Controller.js which doesn't exist (404). The main cause is not the same-origin policy here.
In the App.controller.js file, you must have defined the dependencies with an invalid syntax. Instead of dots (.), use slashes (/) in between as the API sap.ui.define awaits an array of module paths (not module names).
sap.ui.define([
"sap/ui/core/mvc/Controller" // instead of "sap.ui.core.mvc.Controller"
], function(Controller) {
...
});
I am new in this Ionic field. I created a new app in my localhost folder(C:\xampp\htdocs). When I go to "http://localhost/ionapp/www/" everything works fine but when I run the app from "ionic serve" command I get the blank page.
When I viewed the page source I found that ionic.css and ionic.bundle.js file are not loaded during ionic serve. And in the console I get the error like "angular is not defined". Can anyone please help me fix this?
Here is my index.html which should load css and js files
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
So it was not the issue with my ionic but with my browser. Turns out I was getting ERR_CONNECTION_RESET in my console. So basically what I did was
Open cmd prompt as administrator.
Run the command netsh winsock reset.
Restart my computer.
I don't know how it happened but it solved all my problems.
I've recently stumbled upon an annoying problem and can't figure out what could be the cause. I'm working on a ionic hybrid app and since yesterday everything worked fine: I was able to deploy it on my android phone, I could debug it on my browser. Today I open up my project, fire the ionic serve and the browser greets me with a blank screen.
I get the address: localhost:8100/, but it really should be localhost:8100/#/app/sessions
The console log report no errors neither the net log.
This is the source code of the index.html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular/angular.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
I tried to start a new ionic project but the outcome is the same: I get a blank page.
I've set the ionic serve address to localhost; I,ve tried to load all angular and ionic module but to no avail. Do you have any suggestions?
On a closer inspection I found this error (I've skimmed the log):
"Error: [$injector:modulerr] Failed to instantiate module starter due to:
[$injector:modulerr] Failed to instantiate module starter.controllers due to:
[$injector:modulerr] Failed to instantiate module starter.services due to:
[$injector:modulerr] Failed to instantiate module ngResource due to:
**[$injector:nomod] Module 'ngResource' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.**
I wasn't really sure why but angular coudn't find the ngResource module. A quick check show me spelling wasn't the real problem.
For some reason (on whitch I'm still investigating) publishing the app destroyed angular-resource.js and the resulting .min was lacking the code.
Anyway, when I tried to reload the whole thing, I was loading ngResource version 1.3.15 and angular.js version 1.3.14, making them not working.
So, I was failing Computer Science 101: "always check the versions".
I've set all the version to 1.3.15 and all is working like a charm.
For what it is worth, we had a very similar problem: ionic serve -c had no negative behavior, no error output, simply loaded a blank screen.
The problem in our case was that there was a "!" in the full path of the working directory.
Changing the working directory to a path without a "!" solved this issue.
Original solution here
I've read this and decided to rename my gwt-module, but got a fault. IDEA automaticaly generates test.gwt.xml when I create GWT-module project. It put:
<module rename-to="test">
inside test.gw.xml. If I remove "rename-to ..." and run app, GWT-plugin gives me an error. It seems to be nesessary in gwt.xml. It is contradictional with "Renaming Modules" part of article. Why can't I remove or rename?
Here is test.gwt.xml:
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"
"http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="test2">
<inherits name='com.google.gwt.user.User'/>
<entry-point class='com.ibm.temp.client.test'/>
<servlet path='/testService' class='com.ibm.temp.server.testServiceImpl'/>
</module>
And test.html:
<html>
<head>
<title>Wrapper HTML for App</title>
<link type="text/css" rel="stylesheet" href="test.css">
<script type="text/javascript" language="javascript" src="com.ibm.temp.test/com.ibm.temp.test.nocache.js"></script>
</head>
<body>
<h1>Simple Application</h1>
<div id="input-container"/>
</body>
</html>
Change script tag like this.The problem is that ur browser cannot find the nocache.js file.
If module rename to abc , nocache.js will be in war/abc/abc.noacache.js
If module not renamed,it will be in war/full package name of gwt.xml/full package name.nocache.js
For your case it will be as,
<script type="text/javascript" language="javascript" src="test2/test2.nocache.js"></script>