Merge pull request #6 from SathishKumarRajendran/master

Updated to latest Angular CLI

Author: Mydeen-SN

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,41 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

README.md

@@ -1,195 +1,63 @@
-# Getting Started Electron with Angular
+# Integrating Syncfusion Angular Components with Angular and Electron Applications
 
 This document helps you to create a simple Angular application with `Electron Framework` and `Syncfusion Angular UI components`.
 
 ## Prerequisites
 
-Before getting started with the Angular project with Syncfusion Angular Components in Electron, check whether the following are installed in the developer machine. 
+Before getting started with the Angular project, make sure you have the following installed on your machine,
 
-* Angular Versions supported - 4+
-* Typescript Versions supported - 2.6+
-* Electron CLI - 6.0.10+
+* [System requirements for Syncfusion Angular UI components](https://ej2.syncfusion.com/angular/documentation/system-requirement)
+* Electron CLI version - `^22.x.x` or later
 
->Note: If the `electron CLI` is not installed, refer to [`getting started with electron`](https://www.npmjs.com/package/electron-cli) to install it.
+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.
 
-## Setup Angular environment
+## Getting started with Syncfusion Angular component
 
-You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.
+Follow the [documentation](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli) to create an Angular application that includes Syncfusion Angular components.
 
-```bash
-npm install -g @angular/cli
-```
-
-## Create an application
-
-Create a new project with the following command using the command prompt.
-
-```bash
-ng new my-app
-cd my-app
-```
-
-Install electron framework using the following command
-
-```bash
-npm install -g electron
-```
-
->Note: Here we are using electron version 6.0.10 to support angular 6 .
-
->Note: Also refer the below [getting started](https://electronjs.org/docs/tutorial/installation) to install electron framework.
-
-## Installing Syncfusion Menu package
-
-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- ).
-
-To install Menu package, use the following command.
-
-```bash
-npm install @syncfusion/ej2-angular-navigations --save
-(or)
-npm i @syncfusion/ej2-angular-navigations --save
-```
-
-## Adding Menu module
-
-After installing the package, the component modules are available to configure into your application from Syncfusion installed
-package. Syncfusion Angular package provides two different types of ng-Modules.
-
-Refer to [`Ng Module`](https://ej2.syncfusion.com/angular/documentation/common/ng-module.html) to learn about `ngModules`.
-
-Import Menu module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-navigations`.
+## Create main.js file
 
+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.
 
 ```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// Imported Syncfusion menu module from navigations package.
-import { MenuModule } from '@syncfusion/ej2-angular-navigations';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-    imports: [BrowserModule, MenuModule], // Registering EJ2 Menu Module.
-    declarations: [AppComponent],
-    bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
+const { app, BrowserWindow } = require('electron');
+let win;
 
-## Adding Syncfusion Menu component
+function createWindow() {
+  win = new BrowserWindow({ width: 800, height: 600 });
 
-Modify the template in `app.component.ts` file with `ejs-menu` to render the Menu component.
+  // Load the Angular app in the browser window
+  win.loadFile('./dist/sample15/index.html');
 
-```typescript
-import { Component } from '@angular/core';
-import { enableRipple } from '@syncfusion/ej2-base';
-import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';
-
-enableRipple(true);
-
-@Component({
-    selector: 'app-root',
-    template: `<!-- To Render Menu. -->
-            <ejs-menu [items]='menuItems'></ejs-menu>`
-})
-
-export class AppComponent {
-    public menuItems: MenuItemModel[] = [
-        {
-            text: 'File',
-            items: [
-                { text: 'Open',  url: 'https://www.google.com/search?q=washing+machine' },
-                { text: 'Save' },
-                { text: 'Exit' }
-            ]
-        },
-        {
-            text: 'Edit',
-            items: [
-                { text: 'Cut' },
-                { text: 'Copy' },
-                { text: 'Paste' }
-            ]
-        },
-        {
-            text: 'View',
-            items: [
-                { text: 'Toolbar' },
-                { text: 'Sidebar' }
-            ]
-        },
-        {
-            text: 'Tools',
-            items: [
-                { text: 'Spelling & Grammar' },
-                { text: 'Customize' },
-                { text: 'Options' }
-            ]
-        },
-        { text: 'Go' },
-        { text: 'Help' }
-    ];
+  win.on('closed', () => {
+    win = null;
+  });
 }
-```
-
-## Adding CSS reference
-
-Add Menu component’s styles as given below in `style.css`.
 
-```typescript
-@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
-@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
-```
-## Create main.js file
-
-Create a `main.js` file in the root folder of the project and add the following code in `main.js` file
-
-```typescript
-const { app, BrowserWindow } = require('electron');
-let win;
-function createWindow () {     
-// Create the browser window.
-win = new BrowserWindow({ width: 800, height: 600 });
-// and load the index.html of the app. 
-win.loadFile('./dist/my-app/index.html');
-// Open the DevTools.
-win.webContents.openDevTools();
-// Emitted when the window is closed.
-win.on('closed', () => {       
-   win = null     
-  })
-};      
-// This method will be called when Electron has finished   
-// initialization and is ready to create browser windows.   
-// Some APIs can only be used after this event occurs.   
 app.on('ready', createWindow);
 
-// Quit when all windows are closed.
-app.on('window-all-closed', () => { 
-// On macOS it is common for applications and their menu bar     
-// to stay active until the user quits explicitly with Cmd + Q     
-if (process.platform !== 'darwin') {
-app.quit()
-}   
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (win === null) {
+    createWindow();
+  }
 });
 
-app.on('activate', () => {     
-// On macOS it's common to re-create a window in the app when the     
-// dock icon is clicked and there are no other windows open.     
-if (win === null) {
-createWindow()
-}   
-});  
 ```
 
 ## Update index.html
 
-In the `/src/index.html` file, change `<base href="/">` as `<base href="./">`. Then only the Electron will able to find the Angular files.
+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
 
+Go to your root directory and find the package.json file. Open its content and add the following,
+
 ```typescript
 "main":"main.js",
 "scripts": { 
@@ -199,27 +67,17 @@ In the `/src/index.html` file, change `<base href="/">` as `<base href="./">`. T
     "test": "ng test", 
     "lint": "ng lint", 
     "e2e": "ng e2e", 
-    "electron-build": "ng build --prod", 
+    "electron-build": "ng build --configuration=production",
     "electron": "electron ." 
 }, 
 ```
 
-Then, Include the above code in `package.json` file.
-
-## Update tsconfig.json
-
-In `tsconfig.json` file, change the target as
-
-```typescript
-"target": "es5"
-```
-
 ## Running the application
 
- Finally, run the following command line to start the application. The Syncfusion Essential JS 2 menu component will be rendered in the electron framework. 
+Finally, run the following command line to start the application. The Syncfusion Essential JS 2 menu component will be rendered in the Electron framework.
 
  ```bash
 npm  run electron-build 
 
 npm  run electron 
-```
+```