如何将 nimview 与 Angular 一起使用？答案

【问题标题】：How do I use nimview together with Angular?如何将 nimview 与 Angular 一起使用？
【发布时间】：2022-08-21 23:12:33
【问题描述】：

Nim 有一个名为 nimview 的 webview 库。它通常通过同时拥有 JS lib 和 nim 包来工作。您导入为您提供 backend 对象的 JS 库。然后，您可以调用该 JS 对象上的函数，它将转换为对您的后端的调用。它将在那里寻找适当的 proc 来执行给定的消息，并将该 proc 的输出返回到前端。

在其文档中，它引用了 vue 或 react 的用法，但我想用 Angular 编写我的前端。不过，我正在为此苦苦挣扎，因为在使用ng serve 运行该角度应用程序时遇到了各种错误。去这里的路是什么？

标签： angular webview nim-lang

【解决方案1】：

首先，将ng serve 与 nimview 一起使用是行不通的。要查看您的应用程序，您必须始终构建它，然后将其放在您的 nim 项目一旦编译成二进制文件就可以访问它以提供index.html 文件的位置。

假设您已经将项目拆分为一个用于 Angular 前端，一个用于 nim 后端，请执行以下操作：

安装 nimview (npm i nimview)
在您的项目中的某处添加一个带有以下代码行的nimview.d.ts 文件：declare module 'nimview';。 This exists solely to please the typescript compiler as it will otherwise complain about nimviews missing type file.
在您的前端项目中，生成一个服务以抽象出后端 (ng g s services/backend) 并使用导入的 nimview 进行设置
```
import { Injectable } from '@angular/core';
import * as nimview from 'nimview';

@Injectable({
  providedIn: 'root'
})
export class BackendService {
  backend: any = nimview.default;

  constructor(){}
  
  echo(val: string): Promise<string>{
    return this.backend.echoAndModify(val);
  }
}
```
1. 在您的前端项目的package json 中进行设置，以便构建它会将构建复制到您的 nim 后端项目中的某个文件夹中。例如。放在脚本下："build": "ng build; rm ../<PATH_TO_BACKEND_PROJECT>/resources/*; cp -r dist/<FRONTEND_PROJECT_NAME>/* <PATH_TO_BACKEND_PROJECT>/resources"
请记住，在调用nimview.start 之前，您的后端对象将仅具有您在 nim 项目中添加的可用 proc：
```
nimview.add("echoAndModify", proc (value: string): string =
  echo "From front-end: " & value
  result = "'" & value & "' modified by back-end")
```
现在您可以编译并启动您的 nimview 项目，然后使用您设置的命令（例如 npm run build）编译并复制您的前端项目，如果您在 nimview 上设置的路径正确启动。您可以在您的 nimview 项目运行时继续重建您的前端，因为它就像一个处于调试模式的 HTTP 服务器，因此就像您点击 ng serve 一样。之所以需要这样做的主要原因是因为来自nimview 的后端代码为backend 对象提供了您需要的所有功能。

【讨论】：