Use Angular inside Neutralinojs

Question

Neutralinojs binary version used : v4.10.0
Neutralinojs client version used : v3.8.2
Angular version used : v15.0.0

Question : How to use Angular as frontend framework with Neutralinojs?

Answer 1

Note: I'm making this because the documentation for NeutralinoJS is currently incomplete, and also because I don't want to forget.

Before we start, there're several things in this answer that assumes you to know how:

• How to setup a new Angular project
• Hot to setup a new Neutralinojs project

Setup

1. Create an empty folder, in order to make things tidy
2. Open a terminal and direct it to the empty folder you just made at step 1
3. Create both an Angular project and a NeutralinoJS project inside the empty folder. For demonstration purposes, let's name the Angular project "frontend" and the NeutralinoJS project "backend"

ng new frontend
neu create backend

4. Open another terminal so that you have two terminals open. Navigate each terminal to the respective folders created using the ng new and neu create commands.
5. In the Angular project, you need to declare window.Neutralino. To do this, you'll need the type definitions file. Install @neutralinojs/lib as a devDependency in your Angular project

npm i -D @neutralinojs/lib

6. In your Angular project's main.ts file (or any other *.component.ts file, as long as this code runs before you use the NeutralinoJS API), add the following code:

import * as neutralinojs from "@neutralinojs/lib";

declare global{
  const Neutralino: typeof neutralinojs;
}

Neutralino.init();

7. Locate neutralino.js file and move it to the assets folder inside your Angular project from either:

• /node_modules/@neutralinojs/lib/dist/neutralino.js inside your Angular project folder
  OR
• From /resources/js/neutralino.js inside your Neutralinojs project folder

8. After placing neutralino.js file to your Angular project's assets folder, now call it from index.html on your Angular project by adding:

<script src="assets/neutralino.js"></script>

9. Now, Open the angular.json file located in the root folder of your Angular project and modify the following property:

"projects": {
 "frontend": {
  "architect": {
   "build": {
    "options": {
     "outputPath": "../backend/resources/",

10. Lastly, in your NeutralinoJS project folder, open the neutralino.config.json file and modify the following property:

// ...
  "cli": {
    "clientLibrary": "/resources/assets/neutralino.js",
// ...

And we're set.

Development / Production

1. In the terminal where your Angular project is running, run the following command:

npm run watch

or the equivalent ng command:

ng build --watch --configuration development

*Note: This command will remove the resources folder inside your NeutralinoJS folder (or the specified folder path from step 9 in the setup process).

Once the command from step 1 has finished compiling and is waiting for changes:

2a. run the following command in the terminal where your NeutralinoJS project is located:

neu run

2b. For production, run the following command in the terminal where your NeutralinoJS project is located:

neu build

*Note: Make sure to use a different terminal from the one used in step 1, as both processes need to run simultaneously.

Now you have NeutralinoJS working together with Angular and change detection.

Answer 2

just go to this page,

https://neutralino.js.org/docs/getting-started/using-frontend-libraries

read the page carefully and do step by step, at the End it occures an Error:
neutralino-win_x64.exe was stopped with error code ...

download this file

https://github.com/neutralinojs/neutralinojs/releases/download/v4.14.0/neutralinojs-v4.14.0.zip

and replace it to the bin folder, it'll work, if you needed any help you can message me, good luck