Skip to content

Commit 83b8452

Browse files
Mydeen-SNMydeen-SN
authored
Merge pull request #8 from SyncfusionExamples/970876-sample
970876: Updated sample to latest structure
2 parents aa61f08 + 34fd814 commit 83b8452

20 files changed

Lines changed: 584 additions & 183 deletions

‎.editorconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
1010

1111
[*.ts]
1212
quote_type = single
13+
ij_typescript_use_double_quotes = false
1314

1415
[*.md]
1516
max_line_length = off

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
# See http://help.github.com/ignore-files/ for more about ignoring files.
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
22

33
# Compiled output
4+
/dist
45
/tmp
56
/out-tsc
67
/bazel-out

‎README.md‎

Lines changed: 34 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,59 @@
1-
# Integrating Syncfusion Angular Components with Angular and Electron Applications
1+
# ElectronApp
22

3-
This document helps you to create a simple Angular application with `Electron Framework` and `Syncfusion Angular UI components`.
3+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.13.
44

5-
## Prerequisites
5+
## Development server
66

7-
Before getting started with the Angular project, make sure you have the following installed on your machine,
7+
To start a local development server, run:
88

9-
* [System requirements for Syncfusion Angular UI components](https://ej2.syncfusion.com/angular/documentation/system-requirement)
10-
* Electron CLI version - `^22.x.x` or later
9+
```bash
10+
ng serve
11+
```
1112

12-
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.
13+
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.
1314

14-
## Getting started with Syncfusion Angular component
15+
## Code scaffolding
1516

16-
Follow the [documentation](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli) to create an Angular application that includes Syncfusion Angular components.
17+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
1718

18-
## Create main.js file
19+
```bash
20+
ng generate component component-name
21+
```
1922

20-
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.
23+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
2124

22-
```typescript
23-
const { app, BrowserWindow } = require('electron');
24-
let win;
25+
```bash
26+
ng generate --help
27+
```
2528

26-
function createWindow() {
27-
win = new BrowserWindow({ width: 800, height: 600 });
29+
## Building
2830

29-
// Load the Angular app in the browser window
30-
win.loadFile('./dist/sample15/index.html');
31+
To build the project run:
3132

32-
win.on('closed', () => {
33-
win = null;
34-
});
35-
}
33+
```bash
34+
ng build
35+
```
3636

37-
app.on('ready', createWindow);
37+
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.
3838

39-
app.on('window-all-closed', () => {
40-
if (process.platform !== 'darwin') {
41-
app.quit();
42-
}
43-
});
39+
## Running unit tests
4440

45-
app.on('activate', () => {
46-
if (win === null) {
47-
createWindow();
48-
}
49-
});
41+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
5042

43+
```bash
44+
ng test
5145
```
5246

53-
## Update index.html
54-
55-
In the `/src/index.html` file, change `<base href="/">` to `<base href="./">`, so that the Electron can able to find the Angular files.
56-
57-
## Update package.json
47+
## Running end-to-end tests
5848

59-
Go to your root directory and find the package.json file. Open its content and add the following,
49+
For end-to-end (e2e) testing, run:
6050

61-
```typescript
62-
"main":"main.js",
63-
"scripts": {
64-
"ng": "ng",
65-
"start": "ng serve",
66-
"build": "ng build",
67-
"test": "ng test",
68-
"lint": "ng lint",
69-
"e2e": "ng e2e",
70-
"electron-build": "ng build --configuration=production",
71-
"electron": "electron ."
72-
},
51+
```bash
52+
ng e2e
7353
```
7454

75-
## Running the application
55+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
7656

77-
Finally, run the following command line to start the application. The Syncfusion Essential JS 2 menu component will be rendered in the Electron framework.
57+
## Additional Resources
7858

79-
```bash
80-
npm run electron-build
81-
82-
npm run electron
83-
```
59+
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‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,31 @@
33
"version": 1,
44
"newProjectRoot": "projects",
55
"projects": {
6-
"sample15": {
6+
"electron-app": {
77
"projectType": "application",
88
"schematics": {},
99
"root": "",
1010
"sourceRoot": "src",
1111
"prefix": "app",
1212
"architect": {
1313
"build": {
14-
"builder": "@angular-devkit/build-angular:browser",
14+
"builder": "@angular-devkit/build-angular:application",
1515
"options": {
16-
"outputPath": "dist/sample15",
16+
"outputPath": "dist/electron-app",
1717
"index": "src/index.html",
18-
"main": "src/main.ts",
18+
"browser": "src/main.ts",
1919
"polyfills": [
2020
"zone.js"
2121
],
2222
"tsConfig": "tsconfig.app.json",
2323
"assets": [
24-
"src/favicon.ico",
25-
"src/assets"
24+
{
25+
"glob": "**/*",
26+
"input": "public"
27+
}
2628
],
2729
"styles": [
28-
"src/styles.css",
29-
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
30+
"src/styles.css"
3031
],
3132
"scripts": []
3233
},
@@ -35,24 +36,21 @@
3536
"budgets": [
3637
{
3738
"type": "initial",
38-
"maximumWarning": "500kb",
39-
"maximumError": "5mb"
39+
"maximumWarning": "500kB",
40+
"maximumError": "1MB"
4041
},
4142
{
4243
"type": "anyComponentStyle",
43-
"maximumWarning": "2kb",
44-
"maximumError": "4kb"
44+
"maximumWarning": "4kB",
45+
"maximumError": "8kB"
4546
}
4647
],
4748
"outputHashing": "all"
4849
},
4950
"development": {
50-
"buildOptimizer": false,
5151
"optimization": false,
52-
"vendorChunk": true,
5352
"extractLicenses": false,
54-
"sourceMap": true,
55-
"namedChunks": true
53+
"sourceMap": true
5654
}
5755
},
5856
"defaultConfiguration": "production"
@@ -61,19 +59,16 @@
6159
"builder": "@angular-devkit/build-angular:dev-server",
6260
"configurations": {
6361
"production": {
64-
"browserTarget": "sample15:build:production"
62+
"buildTarget": "electron-app:build:production"
6563
},
6664
"development": {
67-
"browserTarget": "sample15:build:development"
65+
"buildTarget": "electron-app:build:development"
6866
}
6967
},
7068
"defaultConfiguration": "development"
7169
},
7270
"extract-i18n": {
73-
"builder": "@angular-devkit/build-angular:extract-i18n",
74-
"options": {
75-
"browserTarget": "sample15:build"
76-
}
71+
"builder": "@angular-devkit/build-angular:extract-i18n"
7772
},
7873
"test": {
7974
"builder": "@angular-devkit/build-angular:karma",
@@ -84,17 +79,21 @@
8479
],
8580
"tsConfig": "tsconfig.spec.json",
8681
"assets": [
87-
"src/favicon.ico",
88-
"src/assets"
82+
{
83+
"glob": "**/*",
84+
"input": "public"
85+
}
8986
],
9087
"styles": [
91-
"src/styles.css",
92-
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
88+
"src/styles.css"
9389
],
9490
"scripts": []
9591
}
9692
}
9793
}
9894
}
95+
},
96+
"cli": {
97+
"analytics": "7530d412-980f-46ae-b82a-dd405f10468b"
9998
}
100-
}
99+
}

‎main.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
const { app, BrowserWindow } = require('electron');
2+
const path = require('path');
3+
24
let win;
35

46
function createWindow() {
57
win = new BrowserWindow({ width: 800, height: 600 });
6-
7-
// Load the Angular app in the browser window
8-
win.loadFile('./dist/sample15/index.html');
8+
win.loadFile(path.join(__dirname, 'dist/electron-app/browser/index.html')); // Adjust 'my-app' to your project name
9+
win.webContents.openDevTools();
910

1011
win.on('closed', () => {
1112
win = null;
@@ -24,4 +25,4 @@ app.on('activate', () => {
2425
if (win === null) {
2526
createWindow();
2627
}
27-
});
28+
});

‎package.json‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,40 @@
11
{
2-
"name": "sample15",
2+
"name": "electron-app",
33
"version": "0.0.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",
77
"build": "ng build",
88
"watch": "ng build --watch --configuration development",
9-
"test": "ng test",
10-
"electron-build": "ng build --configuration=production",
11-
"electron": "electron ."
9+
"test": "ng test"
1210
},
13-
"main": "main.js",
1411
"private": true,
1512
"dependencies": {
16-
"@angular/animations": "^15.1.0",
17-
"@angular/common": "^15.1.0",
18-
"@angular/compiler": "^15.1.0",
19-
"@angular/core": "^15.1.0",
20-
"@angular/forms": "^15.1.0",
21-
"@angular/platform-browser": "^15.1.0",
22-
"@angular/platform-browser-dynamic": "^15.1.0",
23-
"@angular/router": "^15.1.0",
13+
"@angular/common": "^19.2.0",
14+
"@angular/compiler": "^19.2.0",
15+
"@angular/core": "^19.2.0",
16+
"@angular/forms": "^19.2.0",
17+
"@angular/platform-browser": "^19.2.0",
18+
"@angular/platform-browser-dynamic": "^19.2.0",
19+
"@angular/router": "^19.2.0",
2420
"@syncfusion/ej2-angular-grids": "*",
25-
"@syncfusion/ej2-material-theme": "*",
26-
"electron": "^22.2.0",
21+
"@syncfusion/ej2-angular-navigations": "*",
2722
"rxjs": "~7.8.0",
2823
"tslib": "^2.3.0",
29-
"zone.js": "~0.12.0"
24+
"zone.js": "~0.15.0"
3025
},
3126
"devDependencies": {
32-
"@angular-devkit/build-angular": "^15.1.4",
33-
"@angular/cli": "~15.1.4",
34-
"@angular/compiler-cli": "^15.1.0",
35-
"@types/jasmine": "~4.3.0",
36-
"jasmine-core": "~4.5.0",
27+
"@angular-devkit/build-angular": "^19.2.13",
28+
"@angular/cli": "^19.2.13",
29+
"@angular/compiler-cli": "^19.2.0",
30+
"@types/jasmine": "~5.1.0",
31+
"electron": "^36.5.0",
32+
"jasmine-core": "~5.6.0",
3733
"karma": "~6.4.0",
38-
"karma-chrome-launcher": "~3.1.0",
34+
"karma-chrome-launcher": "~3.2.0",
3935
"karma-coverage": "~2.2.0",
4036
"karma-jasmine": "~5.1.0",
41-
"karma-jasmine-html-reporter": "~2.0.0",
42-
"typescript": "~4.9.4"
37+
"karma-jasmine-html-reporter": "~2.1.0",
38+
"typescript": "~5.7.2"
4339
}
4440
}

0 commit comments

Comments
 (0)