Use Angular inside Neutralinojs

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

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

Edit: Added CLI version used

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.

==========================================================

Update 1st May 2024

Moved to a new machine and reinstalled everything, I noticed that using latest Neutralino CLI but not updating the project's client or binary version can cause problem such as file change detection not working.

Updated the question of this post to include what Neutralino CLI version is used with the rest of the tools.