Why do I get 404 on javascript files that are present my application root in an Angular 2 OWA

gsoc2017
radiology

(Ivange Larry) #1

For the new Radiology UI, we are using angular 2. I scaffolded the project using angular cli and I have added a couple of components and all this while I have been using the development server embedded with angular cli just by running ng serve. But now I want deploy it as an owa. And according to docs here https://wiki.openmrs.org/display/docs/Open+Web+Apps+Module the single required file that is needed for this is the manifest.webapp. I have added one and built my project using ng build and it generated a /dist directory the directory structure is as follows

if I take that directory and just deploy it to a webserver it runs fine and my UI works as expected. Now deploying to openmrs as an owa is giving me issues.

First I renamed the directory to radiology and also packaged it into a .zip file. When deploy the owa, the owa module is able to read my manifest.webapp fine because on the dashboard it properly displays the icon and app name as specified in the manifest.webapp. But when I click on the app I get a blank page. Looking at the console I see a lot of 404 to some javascript files needed for angular.

but if you expand all the folder all these files are present int he root directory. Not sure why I’m getting 404 here. It worked fine when I deployed it directly to a web server like a normal web application but breaks when I try to deploy it as an owa.

Platform version 2.0.5 by SDK
OWA module version 1.7.0
Legacy UI module version 1.3.1
@angular/cli: 1.2.0

(Judy Gichoya) #2

I am not an expert here but know @namratanehete and @sunbiz worked on this so they may have suggestions


(Saptarshi Purkayastha) #3

It seems that you might have hard coded any URLs in the code? Or do you use relative paths? The appbaseurl should be pointing to whatever is the base of the server. i.e. localhost:8080/librehealth if that’s where it should be looking for instead of /openmrs or something.


(Ivange Larry) #4

@sunbiz I’m using and openmrs server created with the sdk. Here is the contents of my index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LibreHealth - Radiology</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js">
</script><script type="text/javascript" src="main.bundle.js"></script></body>
</html> 

All the JavaScript includes in the index.html return 404 but all these files are present in the root directory of the app which happens to be the same directory where the index.html is located.

Here is the original contents of my manifest.webapp before I deploy the app

{
  "version": "0.1.0",
  "name": "LibreHealth Radiology",
  "description": "LibreHealth Radiology App",
  "launch_path": "index.html",
  "icons": {
    "48": "/assets/logo.png"
  },
  "developer": {
    "name": "Ivange Larry (ivange94)",
    "url": "https://github.com/ivange94/lh-radiology-owa"
  },
  "default_locale": "en",
  "activities": {
    "openmrs": {
      "href": "*"
    }
  }
}

And here is how my manifest.webapp looks like after I’ve deployed it

{
  "version":"0.1.0",
  "name":"LibreHealth Radiology",
  "description":"LibreHealth Radiology App",
  "icons":{
    "16":null,
    "48":"/assets/logo.png",
    "128":null
  },
  "developer":{
    "url":"https://github.com/ivange94/lh-radiology-owa",
    "name":"Ivange Larry (ivange94)",
    "company":null,
    "email":null
  },
  "activities":{
    "openmrs":{
      "href":"http://localhost:8080/openmrs"
    }
  },
  "folderName":"radiology",
  "baseUrl":"http://localhost:8080/openmrs/owa",
  "launchUrl":"http://localhost:8080/openmrs/owa/radiology/index.html",
  "launch_path":"index.html",
  "installs_allowed_from":null,
  "default_locale":"en",
  "deployed.owa.name":null
}

(Ivange Larry) #5

Oops. Sorry for the ping. I’ve figured out the problem. Inside my index.html the <base href"/"> is pointing to ‘/’. That was the error. Changing that to

<base href='http://localhost:8080/openmrs/owa/radiology/'> fixed the issue. Now I no longer get 404 when I run my app. Now I can access the interface but i get an error in the console that System is not defined at eval. Trying to figure that out now.

Thanks,


(Robby O'Connor) #6