在 ONOS 2.4.0 中单击自定义 GUI 导航项时出错

Question

我有一个使用 onos-create-app cli 创建的自定义 GUI 应用程序，它使用 ui2 maven 原型来创建应用程序。我第一次运行 mvn clean install 它抛出错误：-

Generic type 'FactoryDef' requires 1 type argument(s)

我在网上搜索并发现要解决此问题，我需要从 Angular 9.0 升级到 Angular 9.1。这样做之后，mvn clean install 生成了我安装到 onos 2.4.0 中的 oar 文件。安装激活成功

我可以看到我的自定义 gui VIEW_TEXT 显示在导航菜单中。单击它后，出现以下错误：-

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'foo-app-app'.

在我生成的 gui 应用程序中 VIEW_ID 是 foo-app-app。我不确定如何解决这个问题。我已经下载了 onos 2.4.0，但没有使用 bazel 从源代码构建它。

Answer 1

通过 onos wiki 文档和 github 自述文件进行彻底研究后，我发现以下方法对我有用：-

自定义gui2应用的ONOS源代码变更（运行时间实现）

（在确保您使用正确版本的 onos 后进行这些更改 - 在这种情况下检查 onos-2.4 分支）：-

假设我们的应用程序有两个部分，一个是后端，一个是前端。

后端应用程序代码可以独立于onos源代码，然后我们可以将其安装在我们编译的onos应用程序中，就像我们在2.0之前的版本中所做的那样。

对于前端应用代码，所有改动都在onos源码的onos/web/gui2/目录下进行。这确保我们只需要在前端代码更改时构建新的 gui2 oar 而不是整个源代码。这允许我们在编译的 onos 应用程序中重新安装 gui2 oar。

将前端应用程序的目录命名为customApp.

在你的onos源码中，

转到 onos/web/gui2/src/main/webapp/app/view 并创建 customApp目录。

customApp目录可以有以下结构：-
- 创建一个名为 custom-app 的目录，其中将包含以下文件：-
  - customApp.component.ts
  - customApp.component.html
  - customApp.component.css
- 一个名为 customApp.module.ts 的文件，这是我们的顶级 Angular 模块。
- 一个 BUILD bazel 文件。

注意：- 随着越来越多的组件被添加，您可以自由地为 angular 应用程序遵循您自己的目录结构。这个结构是onos gui默认遵循的结构（参见device for reference）。命名规范并不严格。

转到 onos/web/gui2/src/main/webapp/app 并打开 BUILD 文件。
转到 ng_module 的 deps 部分并添加 //web //gui2/src/main/webapp/app/view/customApp:gui2-view-customApp 在里面。转到 onos/web/gui2/src/main/webapp/onos-routing.module.ts 并在 onosRoutes 列表中，添加以下内容: -
```
     <Route>

   {
     path:"custom-app",
     pathMatch:"prefix",
     loadChildren:()=>import("./view/customApp/customApp.module.ts 
      ").then((m)=>m.CustomAppModule)}
    }
```
转到顶级目录，即 onos 和运行 bazel build //web/gui2:onos-web -gui2-oar。这将在onos/bazel-bin/web/gui2.[=12=下生成onos-web-gui2-oar.oar ]
在onos应用中重新安装并激活此oar文件。
去http://:8181/onos/ui/login.html然后给onos/rocks as username/password.
打开导航面板，您将在其他部分下看到您的自定义 gui2 应用程序 link。单击它以查看您的自定义 gui2 应用程序。

自定义 gui2 应用程序（构建时实现）的 ONOS 源代码更改

（在确保您使用正确版本的 onos 后进行这些更改 - 在这种情况下检查 onos-2.4 分支）：-

让我们的自定义 gui2 应用程序的名称为 custom-app.

创建一个名为 custom-app 的新文件夹并将其添加到 onos/apps.
在此文件夹中，您可以在 onos/apps[=162= 中的 roadm 应用程序中获得如下应用程序结构].

转到 onos/tools/build/bazel/modules.bzl 并在 APP_MAP 部分下，添加下列： - "//apps/custom-app:onos-apps-custom-app-oar":[]

转到onos/web/gui2/src/main/webapp/app/BUILD.bazel并在deps下 ng_module 部分，添加以下内容：- "//apps/custom-app/web/custom-app-gui:custom-app-gui"

转到 onos/web/gui2/src/main/webapp/onos-routing.module.ts 并进入 onosRoutes 列表，添加以下内容：-

<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)} }

返回onos根目录和运行bazel build onos（确保bazel已设置事先）。

以上操作会输出onos/bazel-bin目录下的onos.tar.gz

复制此目录并将其移动到所需位置并解压。

进入onos-2.4.1-SNAPSHOT文件夹（解压操作onos.tar.gz输出具有此名称的文件夹，我们可以通过更改另外两个配置文件来更改此版本名称。

进入bin执行./onos-service s命令

使用另一个终端打开karaf客户端，进入onos-2.4.1-SNAPSHOT/apache-karaf-4.2.8/bin并执行./client 命令.

在客户端 shell 中，键入 app activate org.onosproject.custom-app。这将激活我们的自定义 gui2 应用程序（您也可以跳过 karaf 客户端部分以使用 onos gui 激活应用程序）。

去http://:8181/onos/ui/login.html然后给onos/rocks as username/password.

打开导航面板，您将在其他部分下看到您的自定义 gui2 应用程序 link。单击它以查看您的自定义 gui2 应用程序。

在 ONOS 2.4.0 中单击自定义 GUI 导航项时出错

Getting error while clicking on custom GUI navigation item in ONOS 2.4.0

angular

sdn

onos

自定义gui2应用的ONOS源代码变更（运行时间实现）

自定义 gui2 应用程序（构建时实现）的 ONOS 源代码更改