在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生成了oar文件，我将其安装到onos2.4.0中。安装及其激活成功。

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

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

在我生成的gui应用程序中，VIEW_ID就是foo-app-app。我不知道如何解决这个问题。我已经下载了onos2.4.0，并没有使用bazel从源代码构建它。

Answer 1

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

自定义gui2应用程序的ONOS源代码更改(运行时实现)

(在这种情况下，在确保您处于正确版本的onos-checkout onos-2.4分支后进行这些更改)：-

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

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

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

让前端应用程序的目录被称为customApp。

在您的onos源代码中，

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

   customApp目录可以具有以下结构：-

   • 创建一个名为自定义应用程序的目录，该目录将包括以下文件：-
     • customApp.component.ts
     • customApp.component.html
     • customApp.component.css
   • 一个名为customApp.module.ts的文件，它是我们的顶级Angular模块
   • BUILD巴泽尔文件

注意：-随着越来越多的组件的添加，您可以自由地按照自己的angular应用程序目录结构进行操作。这个结构是onosgui默认遵循的结构(请参阅设备以获取参考)。命名约定并不严格

2. 转到onos/web/gui2/src/main/webapp/app并打开BUILD文件。

3. 转到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)}
   }
   

4. 转到顶级目录，即onos并运行bazel-build//web/gui2:onos-web-gui2-oar。这将在onos/bazel-bin/web/gui2下生成onos-web-gui2-oar.oar。

5. 在onos应用程序中重新安装并激活此oar文件。

6. 转到http://：8181/onos/ui/login.html并将onos/rocks指定为用户名/密码。

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

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

(在这种情况下，在确保您处于正确版本的onos-checkout onos-2.4分支后进行这些更改)：-

让我们的自定义gui2应用程序的名称为自定义应用程序。

1. 创建一个名为自定义应用程序的新文件夹，并将其添加到onos/apps中。

2. 在此文件夹中，您可以在onos/apps中的roadm应用程序中拥有如下应用程序结构。

3. 转到onos/tools/build/bazel/modules.bzl，并在APP_MAP部分下添加以下内容：-"//应用程序/自定义应用程序：onos应用程序自定义应用程序oar"：[]

4. 转到onos/web/gui2/src/main/webapp/app/BUILD.bazel，并在ng_module的deps部分下添加以下内容：-"//apps/custom-app/web/custom-app-gui：自定义应用gui">

5. 转到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)}
   }
   

6. 返回onos根目录并运行bazel-build-ons(确保预先设置了bazel)。

7. 上述操作将输出onos/bazel-bin目录下的-os.tar.gz。

8. 复制并将此目录移动到所需位置并取消标记。

9. 转到onos-2.4.1-SNAPSHOT文件夹(在onos.tar.gz上的untar操作输出具有此名称的文件夹，我们可以通过在另外两个配置文件中进行更改来更改此版本名称)。

10. 转到bin并执行/onos服务的命令。

11. 使用另一个终端打开karaf客户端，方法是转到onos-2.4.1-SNAPSHOT/apache-karaf-4.2.8/bin并执行/客户端命令。

12. 在客户端外壳中，键入app-activateorg.onosproject.custom-app。这将激活我们的自定义gui2应用程序(您也可以跳过karaf客户端部分，使用onos-gui激活应用程序)。

13. 转到http://：8181/onos/ui/login.html并将onos/rocks指定为用户名/密码。

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