如何在Neutralinojs中使用Angular作为前端框架？

（适配版本：Neutralinojs二进制v4.10.0 / CLI v9.3.1 / 客户端v3.8.2 / Angular v15.0.0）

1. 准备基础环境 #

先全局安装对应版本的工具：

• 安装Neutralino CLI：npm install -g @neutralinojs/neu@9.3.1
• 安装Angular CLI：npm install -g @angular/cli@15.0.0

2. 初始化Neutralino项目 #

• 创建项目并进入目录：

  neu create angular-neutro-app
  cd angular-neutro-app
  

• 拉取对应版本的Neutralino二进制文件：neu update

3. 搭建Angular前端项目 #

• 在Neutralino项目根目录下创建Angular项目：

  ng new frontend --routing=false --style=css
  

• 进入Angular目录，安装Neutralino客户端库：

  cd frontend
  npm install @neutralinojs/lib@3.8.2
  

4. 配置Angular与Neutralino的适配 #

• 修改Angular输出目录：打开frontend/angular.json，找到projects.frontend.architect.build.options.outputPath，将值改为"../dist"
• 在Angular入口文件初始化Neutralino：打开frontend/src/index.html，在</body>标签前添加：

  <script src="neutralino.js"></script>
  <script>
      Neutralino.init();
  </script>
  

• 若要在Angular组件中调用Neutralino API，示例修改frontend/src/app/app.component.ts：

  import { Component, OnInit } from '@angular/core';
  declare const Neutralino: any;
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    ngOnInit(): void {
      // 示例：获取系统HOME环境变量
      Neutralino.os.getEnv('HOME').then(res => {
        console.log('用户主目录:', res);
      }).catch(err => {
        console.error('调用API失败:', err);
      });
    }
  }
  

5. 配置Neutralino项目设置 #

• 打开根目录neutralino.config.json：
  • 将documentRoot的值改为"/dist"
  • 清空url字段（确保使用本地静态文件）
  • 根据需求添加权限，比如要调用系统环境变量API，就在permissions数组中加入"os:env"：

    "permissions": [
      "os:env",
      "window:all"
    ]
    

6. 构建并运行项目 #

• 先构建Angular项目：在frontend目录执行ng build
• 返回Neutralino项目根目录，启动应用：neu run

内容的提问来源于stack exchange，提问作者Ad S.S