970876: Updated sample to latest structure

Author: Manikandan-Lakshmanan

.editorconfig

@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
 
 [*.ts]
 quote_type = single
+ij_typescript_use_double_quotes = false
 
 [*.md]
 max_line_length = off

.gitignore

@@ -1,6 +1,7 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
 # Compiled output
+/dist
 /tmp
 /out-tsc
 /bazel-out

README.md

@@ -1,83 +1,59 @@
-# Integrating Syncfusion Angular Components with Angular and Electron Applications
+# ElectronApp
 
-This document helps you to create a simple Angular application with `Electron Framework` and `Syncfusion Angular UI components`.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.13.
 
-## Prerequisites
+## Development server
 
-Before getting started with the Angular project, make sure you have the following installed on your machine,
+To start a local development server, run:
 
-* [System requirements for Syncfusion Angular UI components](https://ej2.syncfusion.com/angular/documentation/system-requirement)
-* Electron CLI version - `^22.x.x` or later
+```bash
+ng serve
+```
 
-If you do not have the `Electron CLI` installed, refer to the [`Electron package`](https://www.npmjs.com/package/electron-cli) for instructions on how to install it.
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
 
-## Getting started with Syncfusion Angular component
+## Code scaffolding
 
-Follow the [documentation](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli) to create an Angular application that includes Syncfusion Angular components.
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
 
-## Create main.js file
+```bash
+ng generate component component-name
+```
 
-Create a `main.js` file in the root folder of the project and update the below code, This file will serve as an entry-point for Electron and it is responsible for creating windows and handling all the system events that might occur in the app.
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
 
-```typescript
-const { app, BrowserWindow } = require('electron');
-let win;
+```bash
+ng generate --help
+```
 
-function createWindow() {
-  win = new BrowserWindow({ width: 800, height: 600 });
+## Building
 
-  // Load the Angular app in the browser window
-  win.loadFile('./dist/sample15/index.html');
+To build the project run:
 
-  win.on('closed', () => {
-    win = null;
-  });
-}
+```bash
+ng build
+```
 
-app.on('ready', createWindow);
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
 
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit();
-  }
-});
+## Running unit tests
 
-app.on('activate', () => {
-  if (win === null) {
-    createWindow();
-  }
-});
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
 
+```bash
+ng test
 ```
 
-## Update index.html
-
-In the `/src/index.html` file, change `<base href="/">` to `<base href="./">`, so that the Electron can able to find the Angular files.
-
-## Update package.json
+## Running end-to-end tests
 
-Go to your root directory and find the package.json file. Open its content and add the following,
+For end-to-end (e2e) testing, run:
 
-```typescript
-"main":"main.js",
-"scripts": { 
-    "ng": "ng", 
-    "start": "ng serve", 
-    "build": "ng build", 
-    "test": "ng test", 
-    "lint": "ng lint", 
-    "e2e": "ng e2e", 
-    "electron-build": "ng build --configuration=production",
-    "electron": "electron ." 
-}, 
+```bash
+ng e2e
 ```
 
-## Running the application
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
-Finally, run the following command line to start the application. The Syncfusion Essential JS 2 menu component will be rendered in the Electron framework.
+## Additional Resources
 
- ```bash
-npm  run electron-build 
- 
-npm  run electron 
-```
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

angular.json

@@ -3,30 +3,31 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "sample15": {
+    "electron-app": {
       "projectType": "application",
       "schematics": {},
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/sample15",
+            "outputPath": "dist/electron-app",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
             "polyfills": [
               "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
-              "src/favicon.ico",
-              "src/assets"
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
             ],
             "styles": [
-              "src/styles.css",
-              "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
+              "src/styles.css"
             ],
             "scripts": []
           },
@@ -35,24 +36,21 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
                 }
               ],
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"
@@ -61,19 +59,16 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "sample15:build:production"
+              "buildTarget": "electron-app:build:production"
             },
             "development": {
-              "browserTarget": "sample15:build:development"
+              "buildTarget": "electron-app:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "sample15:build"
-          }
+          "builder": "@angular-devkit/build-angular:extract-i18n"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
@@ -84,17 +79,21 @@
             ],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
-              "src/favicon.ico",
-              "src/assets"
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
             ],
             "styles": [
-              "src/styles.css",
-              "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
+              "src/styles.css"
             ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "7530d412-980f-46ae-b82a-dd405f10468b"
   }
-}
+}

main.js

@@ -1,11 +1,12 @@
 const { app, BrowserWindow } = require('electron');
+const path = require('path');
+
 let win;
 
 function createWindow() {
   win = new BrowserWindow({ width: 800, height: 600 });
-
-  // Load the Angular app in the browser window
-  win.loadFile('./dist/sample15/index.html');
+  win.loadFile(path.join(__dirname, 'dist/electron-app/browser/index.html')); // Adjust 'my-app' to your project name
+  win.webContents.openDevTools();
 
   win.on('closed', () => {
     win = null;
@@ -24,4 +25,4 @@ app.on('activate', () => {
   if (win === null) {
     createWindow();
   }
-});
+});

package.json

@@ -1,44 +1,40 @@
 {
-  "name": "sample15",
+  "name": "electron-app",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test",
-    "electron-build": "ng build --configuration=production",
-    "electron": "electron ."
+    "test": "ng test"
   },
-  "main": "main.js",
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.1.0",
-    "@angular/common": "^15.1.0",
-    "@angular/compiler": "^15.1.0",
-    "@angular/core": "^15.1.0",
-    "@angular/forms": "^15.1.0",
-    "@angular/platform-browser": "^15.1.0",
-    "@angular/platform-browser-dynamic": "^15.1.0",
-    "@angular/router": "^15.1.0",
+    "@angular/common": "^19.2.0",
+    "@angular/compiler": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/platform-browser": "^19.2.0",
+    "@angular/platform-browser-dynamic": "^19.2.0",
+    "@angular/router": "^19.2.0",
     "@syncfusion/ej2-angular-grids": "*",
-    "@syncfusion/ej2-material-theme": "*",
-    "electron": "^22.2.0",
+    "@syncfusion/ej2-angular-navigations": "*",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.12.0"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.4",
-    "@angular/cli": "~15.1.4",
-    "@angular/compiler-cli": "^15.1.0",
-    "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~4.5.0",
+    "@angular-devkit/build-angular": "^19.2.13",
+    "@angular/cli": "^19.2.13",
+    "@angular/compiler-cli": "^19.2.0",
+    "@types/jasmine": "~5.1.0",
+    "electron": "^36.5.0",
+    "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.9.4"
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.7.2"
   }
 }