I have a custom GUI app created using onos-create-app cli which uses ui2 maven archetype for creating the application.
The first time I run mvn clean install on it, it threw error:-
Generic type 'FactoryDef' requires 1 type argument(s)
I searched online and found that to fix this I need to upgrade from Angular 9.0 to Angular 9.1. After doing so, mvn clean install generated the oar file which I installed into onos 2.4.0. The installation and it's activation succeeded.
I could see my custom gui's VIEW_TEXT being displayed in the navigation menu. Once I click on it, the following error comes:-
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'foo-app-app'.
The VIEW_ID is foo-app-app in my generated gui app. I am not sure how to solve this. I have downloaded onos 2.4.0 and not built it from source using bazel.
After doing thorough research through onos wiki docs and github README's, these are the following ways I have found to be working for me:-
(Do these changes after ensuring you're in in the correct version of onos - checkout onos-2.4 branch in this case ):-
Let us say that our application has two parts, one is the backend and one is the frontend.
The backend application code can be made independent of onos source code and then we can install it in our compiled onos application as we had been doing for version prior to 2.0.
For the frontend application code, all changes will be made under onos/web/gui2/ directory of onos source code. This ensures that we only need to build new gui2 oar when frontend code changes and not the whole source code. This allows us to reinstall gui2 oar in our compiled onos application.
Let frontend application’s directory be called customApp.
In your onos source code,
Go to onos/web/gui2/src/main/webapp/app/view and create customApp directory.
customApp directory can have the following structure:-
Note:- You’re free to follow your own directory structure for the angular app as more and more components are added. This structure is what onos gui follows by default (See device for reference). The naming convention is not strict.
Go to onos/web/gui2/src/main/webapp/app and open BUILD file.
Go to deps section of ng_module and add //web//gui2/src/main/webapp/app/view/customApp:gui2-view-customApp in it. Go to onos/web/gui2/src/main/webapp/onos-routing.module.ts and inside the onosRoutes list, add the following: -
<Route>
{
path:"custom-app",
pathMatch:"prefix",
loadChildren:()=>import("./view/customApp/customApp.module.ts
").then((m)=>m.CustomAppModule)}
}
Go to top level directory i.e. onos and run bazel build //web/gui2:onos-web-gui2-oar. This will generate onos-web-gui2-oar.oar under onos/bazel-bin/web/gui2.
Reinstall and activate this oar file in onos application.
Go to http://:8181/onos/ui/login.html and give onos/rocks as username/password.
Open the navigation panel and you will see your custom gui2 app link under the Other section. Click on it to view your custom gui2 application.
(Do these changes after ensuring you're in in the correct version of onos - checkout onos-2.4 branch in this case ):-
Let the name of our custom gui2 app be custom-app.
Create a new folder named custom-app and add it to the onos/apps.
Inside this folder you can have the application structure as followed in the roadm app inside onos/apps.
Go to onos/tools/build/bazel/modules.bzl and under the APP_MAP section, add the following: - "//apps/custom-app:onos-apps-custom-app-oar":[]
Go to onos/web/gui2/src/main/webapp/app/BUILD.bazel and under the deps section of ng_module, add the following: - "//apps/custom-app/web/custom-app-gui:custom-app-gui"
Go the onos/web/gui2/src/main/webapp/onos-routing.module.ts and inside the onosRoutes list, add the following: -
<Route>
{
path:"custom-app-gui",
pathMatch:"prefix",
loadChildren:()=>import("../../../../../../apps/custom-app/web/custom-app-
gui/lib/custom-app-gui-lib.module").then((m)=>m.CustomAppGuiLibModule)}
}
Go back to onos root directory and run bazel build onos (ensure bazel is setup beforehand).
The above operation will output the onos.tar.gz under onos/bazel-bin directory.
Copy and move this directory to the desired location and untar it.
Go to onos-2.4.1-SNAPSHOT folder(untar operation on onos.tar.gz outputs folder with this name, we can change this version name by doing changes in two more config files).
Go to bin and execute ./onos-service s command.
Use another terminal to open karaf client by going to onos-2.4.1-SNAPSHOT/apache-karaf-4.2.8/bin and execute ./client command.
In the client shell, type app activate org.onosproject.custom-app. This will activate our custom gui2 application (You can also skip the karaf client part to use onos gui to activate the application).
Go to http://:8181/onos/ui/login.html and give onos/rocks as username/password.
Open the navigation panel and you will see your custom gui2 app link under the Other section. Click on it to view your custom gui2 application.