Getting Started with Angular CLI

24 May 202420 minutes to read

The Angular CLI is a command line interface is used to create an Angular application that already works. To getting started with Syncfusion Angular components, the NPM packages ej-angular2 and syncfusion-javascript helps to seamlessly supports angular-cli environment for our components.

The following steps depicts, to create an application in angular-cli with Syncfusion Angular Components

Prerequisites

  • Node.js (v6.x.x or higher)
  • NPM (v3.x.x or higher)

The following synopsis illustrates the major steps in creation of application.

Synopsis

Install the Angular CLI

  • To install the angular-cli globally, run the following command in Command Prompt
  • JAVASCRIPT
    • npm install -g @angular/cli

    NOTE

    To know more about angular-cli commands refer here

    Create a new Application

    • To create a new Angular application run the below command in Command Prompt
  • JAVASCRIPT
    • ng new project-name
E.g.: ng new ejProject

    NOTE

    This command installs all the required dependencies for Angular application.

    Configure Syncfusion Angular Component in Angular CLI

    • To configure the Syncfusion Angular component, change the directory to your application’s root folder
  • JAVASCRIPT
    • cd project-name

E.g.: cd ejProject
    • Essential JavaScript provides support for Angular Framework through wrappers. Since, we need the dependencies ej-angular2 package and syncfusion-javascript package. Run the below commands, to install the dependencies.
  • JAVASCRIPT
    • npm install syncfusion-javascript --save
npm install ej-angular2 --save
    • We are working with typescript, since, we need to install the typings dependencies jquery and ej.web.all. We may need of accessing the ej object for Syncfusion widget’s properties in Angular application, which is defined in ej.web.all typings file.
      E.g. ej.TextAlign.right
  • JAVASCRIPT
    • npm install --save-dev @types/jquery
npm install --save-dev @types/ej.web.all
    • And also include the typings jquery and ej.web.all in src/tsconfig.app.json file.
  • JAVASCRIPT
    • {
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [
      "jquery",
      "ej.web.all"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}
    • Syncfusion JavaScript widgets need window.jQuery object to render the Angular components, since, we need to import jQuery in src/polyfills.ts file as like the below code snippet which we already configured in our webpack angular seed application.
  • JAVASCRIPT
    • import * as jquery from 'jquery';
window['jQuery'] = jquery;
window['$'] = jquery;

    Refer the Syncfusion Theme Files

    • We configured the Syncfusion Angular components and their dependencies. For the appearance we need to include Syncfusion theme files from node_modules in style section of angular-cli.json file. Here, we referred the material theme.
  • JAVASCRIPT
    • {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
       . . .
       . . .
      "styles": [
        "styles.css",
         "./../node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css" 
      ],
      "scripts": [],
       . . . 
       . . .
      }

    Render Syncfusion Angular Component

    • To render any Syncfusion Angular Components into the project, we need to import EJAngular2Module from ej-angular2 package in app.module.ts file. Refer to the below code snippet to import Syncfusion Angular components.
  • TS
    • import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EJAngular2Module } from 'ej-angular2'; 
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,EJAngular2Module.forRoot() 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    • Now we can render any Angular component. Here, We rendered the ejDialog Angular component in angular-cli. Refer the below code snippet for app.component.html file.
  • HTML
    • <div id="parent" >
	<input id="btnOpen" style="height: 30px" type="button" ej-button class="ejinputtext" value="Click to open Dialog" (click)="onClick($event)" *ngIf="button_display"/>
	<ej-dialog id="basicDialog" #dialog title="Facebook" [(enableResize)]="resize" containment="#parent" (close)="onClose($event)">
		Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February
		4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin
		Moskovitz and Chris Hughes. The founders had initially limited the website's membership to Harvard students, but later
		expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students
		at various other universities and later to high-school students.
	</ej-dialog>
</div>
    • Modify the app.component.ts file using the below code example.
  • TS
    • import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  resize: boolean;
  button_display: boolean;
  @ViewChild('dialog') dialog: EJComponents <any,any>;
    constructor() {
    this.resize = false;
    this.button_display = false;
  }
  //Button click event handler to open the ejDialog
  onClick(event) {
   this.button_display = false;
   this.dialog.widget.element.ejDialog('open');
  }
  //Dialog close event handler
  onClose(event) {
    this.button_display = true;
  }
}

    NOTE

    If you have faced the issue 'ej' is not defined after the above configuration in Angular CLI latest version 7, Please refer the below code snippet in your application where you have rendered Syncfusion Components(model file) to resolve the issue.

  • TS
    • `/// <reference types="ej.web.all" />`

    Refer the below codes to create the application

    // Refer the code for app.component.ts file (src/app/app.component.ts)

import { Component,  ViewEncapsulation, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  resize: boolean;
  button_display: boolean;
  @ViewChild('dialog') dialog: EJComponents<any, any>;
  constructor() {
    this.resize = false;
    this.button_display = false;
  }
  //Button click event handler to open the ejDialog
  onClick(event) {
    this.button_display = false;
    this.dialog.widget.element.ejDialog('open');
  }
  //Dialog close event handler
  onClose(event) {
    this.button_display = true;
  }
}
    <!-- Refer the code for app.component.html file (src/app/app.component.html)-->

<div id="parent" >
	<input id="btnOpen" style="height: 30px" type="button" ej-button class="ejinputtext" value="Click to open Dialog" (click)="onClick($event)" *ngIf="button_display" />
	<ej-dialog id="basicDialog" #dialog title="Facebook" [(enableResize)]="resize" containment="#parent" (close)="onClose($event)">
		Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February
		4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin
		Moskovitz and Chris Hughes. The founders had initially limited the website's membership to Harvard students, but later
		expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students
		at various other universities and later to high-school students.
	</ej-dialog>
</div>
    // Refer the code for app.module.ts file (src/app/app.module.ts)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EJAngular2Module } from 'ej-angular2';  
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,EJAngular2Module.forRoot() 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    // Refer the code for main.ts (src/main.ts)

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
    // Refer the code for angular-cli.json file 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "ej-project"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "./../node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css" 
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}
    // Refer the code for polyfills.ts (src/polyfills.ts)

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

import * as jquery from 'jquery';
window['jQuery'] = jquery;
window['$'] = jquery;
//import './../node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css'; 

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// import 'intl';  // Run `npm install --save intl`.
    // Refer the code for tsconfig.app.json(src/tsconfig.app.json)
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [
      "jquery",
      "ej.web.all"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}
    // Refer the code for package.json file  

{
  "name": "ej-project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "ej-angular2": "^15.3.29",
    "rxjs": "^5.4.2",
    "syncfusion-javascript": "^15.3.29",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.1",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/ej.web.all": "^15.3.3",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.12",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

    Serve the Application

    Now, navigate to the root of the application and run the application using the below command and navigate to the appropriate port http://localhost:4200 in browser

  • JAVASCRIPT
    • ng serve

    Getting Started Angular CLI

    ng build - production

    To generate production build, run below command.

  • JAVASCRIPT
    • node_modules\.bin\ng build --prod

    If you get error FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory add --max_old_space_size=xx space in ngc.cmd and ng.cmd file from node_modules\.bin folder.

    Modify ngc.cmd

  • JAVASCRIPT
    • @IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\@angular\compiler-cli\src\main.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --max_old_space_size=8192 "%~dp0\..\@angular\compiler-cli\src\main.js" %*
)

    Modify ng.cmd

  • JAVASCRIPT
    • @IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\@angular\cli\bin\ng" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --max_old_space_size=8192 "%~dp0\..\@angular\cli\bin\ng" %*
)

    Importing required Syncfusion Angular components

    Importing EJAngular2Module from ej-angular2 package may cause bundle size bigger, because it imports all Syncfusion Angular components and all its Syncfusion JavaScript dependencies. So, we recommend to import required Angular component from ej-angular2 package as like below code sample.

  • TS
    • import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { EJ_DIALOG_COMPONENTS } from 'ej-angular2/src/ej/dialog.component'; 
import { AppComponent } from './app.component'; 
 
@NgModule({ 
  declarations: [ 
    AppComponent, EJ_DIALOG_COMPONENTS 
  ], 
  imports: [ 
    BrowserModule 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { }
    • If you get error like Error in Type DialogComponent in D:\ejProject\node_modules\src\ej\dialog.component.d.ts is a part of the declarations of 2 Modules : EJAngular2Module and AppModule in dialog component, then import EJComponents as like the below code snippet.
  • TS
    • import { Component, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2/src/ej/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   resize: boolean;
   . . .
  }
}

    NOTE

    This type of error will occur when we use combination of component imports like, ‘components from ej-angular2 package’ and ‘components from individual component from ej-angular2 package’.
    For Example:

  • TS
    • import { EJComponents } from 'ej-angular2';
 and 
import { EJ_DIALOG_COMPONENTS } from 'ej-angular2/src/ej/dialog.component';

    So we recommend you to import all Syncfusion Angular Components from individual components source file.

    NOTE

    If you are using Syncfusion Angular components(like gird component) which uses template, then you need to import EJTemplateDirective as like the below code snippet.

  • TS
    • import { EJTemplateDirective } from 'ej-angular2/src/ej/template';