Skip to content

Commit b331dab

Browse files
SathishKumarSF2836SathishKumarSF2836
committed
Updated to latest Angular CLI
1 parent f9e31aa commit b331dab

38 files changed

Lines changed: 234 additions & 1713 deletions

‎.editorconfig‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎.gitignore‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

‎README.md‎

Lines changed: 14 additions & 212 deletions
Original file line numberDiff line numberDiff line change
@@ -1,225 +1,27 @@
1-
# Getting Started Electron with Angular
1+
# Sample15
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 with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.4.
44

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

7-
Before getting started with the Angular project with Syncfusion Angular Components in Electron, check whether the following are installed in the developer machine.
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
88

9-
* Angular Versions supported - 4+
10-
* Typescript Versions supported - 2.6+
11-
* Electron CLI - 6.0.10+
9+
## Code scaffolding
1210

13-
>Note: If the `electron CLI` is not installed, refer to [`getting started with electron`](https://www.npmjs.com/package/electron-cli) to install it.
11+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
1412

15-
## Setup Angular environment
13+
## Build
1614

17-
You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
1816

19-
```bash
20-
npm install -g @angular/cli
21-
```
17+
## Running unit tests
2218

23-
## Create an application
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
2420

25-
Create a new project with the following command using the command prompt.
21+
## Running end-to-end tests
2622

27-
```bash
28-
ng new my-app
29-
cd my-app
30-
```
23+
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
3124

32-
Install electron framework using the following command
25+
## Further help
3326

34-
```bash
35-
npm install -g electron
36-
```
37-
38-
>Note: Here we are using electron version 6.0.10 to support angular 6 .
39-
40-
>Note: Also refer the below [getting started](https://electronjs.org/docs/tutorial/installation) to install electron framework.
41-
42-
## Installing Syncfusion Menu package
43-
44-
Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the angular syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
45-
46-
To install Menu package, use the following command.
47-
48-
```bash
49-
npm install @syncfusion/ej2-angular-navigations --save
50-
(or)
51-
npm i @syncfusion/ej2-angular-navigations --save
52-
```
53-
54-
## Adding Menu module
55-
56-
After installing the package, the component modules are available to configure into your application from Syncfusion installed
57-
package. Syncfusion Angular package provides two different types of ng-Modules.
58-
59-
Refer to [`Ng Module`](https://ej2.syncfusion.com/angular/documentation/common/ng-module.html) to learn about `ngModules`.
60-
61-
Import Menu module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-navigations`.
62-
63-
64-
```typescript
65-
import { NgModule } from '@angular/core';
66-
import { BrowserModule } from '@angular/platform-browser';
67-
68-
// Imported Syncfusion menu module from navigations package.
69-
import { MenuModule } from '@syncfusion/ej2-angular-navigations';
70-
71-
import { AppComponent } from './app.component';
72-
73-
@NgModule({
74-
imports: [BrowserModule, MenuModule], // Registering EJ2 Menu Module.
75-
declarations: [AppComponent],
76-
bootstrap: [AppComponent]
77-
})
78-
export class AppModule { }
79-
```
80-
81-
## Adding Syncfusion Menu component
82-
83-
Modify the template in `app.component.ts` file with `ejs-menu` to render the Menu component.
84-
85-
```typescript
86-
import { Component } from '@angular/core';
87-
import { enableRipple } from '@syncfusion/ej2-base';
88-
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';
89-
90-
enableRipple(true);
91-
92-
@Component({
93-
selector: 'app-root',
94-
template: `<!-- To Render Menu. -->
95-
<ejs-menu [items]='menuItems'></ejs-menu>`
96-
})
97-
98-
export class AppComponent {
99-
public menuItems: MenuItemModel[] = [
100-
{
101-
text: 'File',
102-
items: [
103-
{ text: 'Open', url: 'https://www.google.com/search?q=washing+machine' },
104-
{ text: 'Save' },
105-
{ text: 'Exit' }
106-
]
107-
},
108-
{
109-
text: 'Edit',
110-
items: [
111-
{ text: 'Cut' },
112-
{ text: 'Copy' },
113-
{ text: 'Paste' }
114-
]
115-
},
116-
{
117-
text: 'View',
118-
items: [
119-
{ text: 'Toolbar' },
120-
{ text: 'Sidebar' }
121-
]
122-
},
123-
{
124-
text: 'Tools',
125-
items: [
126-
{ text: 'Spelling & Grammar' },
127-
{ text: 'Customize' },
128-
{ text: 'Options' }
129-
]
130-
},
131-
{ text: 'Go' },
132-
{ text: 'Help' }
133-
];
134-
}
135-
```
136-
137-
## Adding CSS reference
138-
139-
Add Menu component’s styles as given below in `style.css`.
140-
141-
```typescript
142-
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
143-
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
144-
```
145-
## Create main.js file
146-
147-
Create a `main.js` file in the root folder of the project and add the following code in `main.js` file
148-
149-
```typescript
150-
const { app, BrowserWindow } = require('electron');
151-
let win;
152-
function createWindow () {
153-
// Create the browser window.
154-
win = new BrowserWindow({ width: 800, height: 600 });
155-
// and load the index.html of the app.
156-
win.loadFile('./dist/my-app/index.html');
157-
// Open the DevTools.
158-
win.webContents.openDevTools();
159-
// Emitted when the window is closed.
160-
win.on('closed', () => {
161-
win = null
162-
})
163-
};
164-
// This method will be called when Electron has finished
165-
// initialization and is ready to create browser windows.
166-
// Some APIs can only be used after this event occurs.
167-
app.on('ready', createWindow);
168-
169-
// Quit when all windows are closed.
170-
app.on('window-all-closed', () => {
171-
// On macOS it is common for applications and their menu bar
172-
// to stay active until the user quits explicitly with Cmd + Q
173-
if (process.platform !== 'darwin') {
174-
app.quit()
175-
}
176-
});
177-
178-
app.on('activate', () => {
179-
// On macOS it's common to re-create a window in the app when the
180-
// dock icon is clicked and there are no other windows open.
181-
if (win === null) {
182-
createWindow()
183-
}
184-
});
185-
```
186-
187-
## Update index.html
188-
189-
In the `/src/index.html` file, change `<base href="/">` as `<base href="./">`. Then only the Electron will able to find the Angular files.
190-
191-
## Update package.json
192-
193-
```typescript
194-
"main":"main.js",
195-
"scripts": {
196-
"ng": "ng",
197-
"start": "ng serve",
198-
"build": "ng build",
199-
"test": "ng test",
200-
"lint": "ng lint",
201-
"e2e": "ng e2e",
202-
"electron-build": "ng build --prod",
203-
"electron": "electron ."
204-
},
205-
```
206-
207-
Then, Include the above code in `package.json` file.
208-
209-
## Update tsconfig.json
210-
211-
In `tsconfig.json` file, change the target as
212-
213-
```typescript
214-
"target": "es5"
215-
```
216-
217-
## Running the application
218-
219-
Finally, run the following command line to start the application. The Syncfusion Essential JS 2 menu component will be rendered in the electron framework.
220-
221-
```bash
222-
npm run electron-build
223-
224-
npm run electron
225-
```
27+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

0 commit comments

Comments
 (0)