Merge pull request #2 from anbuarjun/master

Committed the treeshaking sample.

Author: Mydeen-SN

.github/workflows/gitleaks.yaml

@@ -1,35 +1,21 @@
 # Tree Shaking in Angular
 
-Tree shaking in Angular eliminates unused modules from the final bundle file, reducing download size and improving performance. The Angular CLI uses Webpack, which supports tree shaking from version 2. Understanding tree shaking helps optimize application performance.
+The Angular CLI relies on the Webpack bundler to manage and bundle your application's code. Starting from version 2, Webpack introduced full-fledged support for tree shaking. As a result, when you build your Angular application using the Angular CLI, Webpack analyzes your codebase and automatically removes any unreachable or unused code segments.
 
-## Using Syncfusion Angular component with Tree Shaking
+## Using Syncfusion with Tree Shaking
 
-By default, Syncfusion Angular components supports Tree Shaking and it dose not require any special changes in application level.
+Syncfusion Angular components seamlessly support Tree Shaking by default, eliminating the need for any special modifications at the application level. Tree Shaking is a powerful technique that reduces the size of your application's bundle by removing unused code modules. This leads to faster load times and better overall performance.
 
 ## Implementing Tree Shaking in an Angular Application
 
-Here are the steps for enabling Tree Shaking in an Angular application,
+Enabling Tree Shaking in your Angular application, especially when utilizing Syncfusion EJ2 Angular components, is a straightforward process that can significantly enhance your application's efficiency.
 
-1. Create an Angular application with Syncfusion EJ2 Angular components as described in the [Getting Started](../getting-started/angular-cli/) documentation using the [Angular CLI](https://cli.angular.io/).
+### Steps to Enable Tree Shaking
 
-2. Run the `ng build --prod` or `ng serve --prod` command to build or serve the application with Tree Shaking enabled.
+Follow these steps to enable Tree Shaking in your Angular application,
 
-A sample code snippet that shows how to enable Tree Shaking in the `angular.json` configuration file,
+1. Create an Angular Application with Syncfusion Components: Begin by setting up your Angular application with Syncfusion EJ2 Angular components. You can find detailed instructions on how to integrate Syncfusion components into your application in the [Getting Started](../getting-started/angular-cli/) documentation using the [Angular CLI](https://cli.angular.io/).
 
-    ```json
+2. Build or Serve with Tree Shaking: Once your application is configured with Syncfusion components, you can enable Tree Shaking by building or serving the application with production settings. Run the `ng build --configuration=production` or `ng serve --configuration=production` command to build or serve the application with Tree Shaking enabled.
 
-    "configurations": {
-        "production": {
-            "optimization": true,
-            "sourceMap": false,
-            "namedChunks": false,
-            "aot": true,
-            "extractLicenses": true,
-            "vendorChunk": false,
-            "buildOptimizer": true
-        }
-    },
-
-    ```
-
-You can enhance the user experience and boost performance in your Angular application by following the steps above and implementing tree shaking.
+By adhering to these steps and integrating tree shaking into your Angular application, you can significantly enhance performance and elevate the user experience.

README.md

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "ej2-angular-samples": {
+    "syncfusion-angular-app": {
       "projectType": "application",
       "schematics": {},
       "root": "",
@@ -13,7 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/ej2-angular-samples",
+            "outputPath": "dist/syncfusion-angular-app",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": [
@@ -25,7 +25,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
             ],
             "scripts": []
           },
@@ -41,8 +42,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "6mb",
+                  "maximumError": "6mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -67,18 +68,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "ej2-angular-samples:build:production"
+              "browserTarget": "syncfusion-angular-app:build:production"
             },
             "development": {
-              "browserTarget": "ej2-angular-samples:build:development"
+              "browserTarget": "syncfusion-angular-app:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "ej2-angular-samples:build"
+            "browserTarget": "syncfusion-angular-app:build"
           }
         },
         "test": {
@@ -94,12 +95,16 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
             ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "ec65ef7b-4313-4c7f-9d42-d3587151da1b"
   }
 }

angular.json

@@ -1,39 +1,40 @@
 {
-  "name": "tree-shaking",
+  "name": "syncfusion-angular-app",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --configuration=production",
-    "build": "ng build --configuration=production",
+    "start": "ng serve",
+    "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
   "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",
-    "@syncfusion/ej2-angular-grids": "*",
+    "@angular/animations": "^16.2.0",
+    "@angular/common": "^16.2.0",
+    "@angular/compiler": "^16.2.0",
+    "@angular/core": "^16.2.0",
+    "@angular/forms": "^16.2.0",
+    "@angular/platform-browser": "^16.2.0",
+    "@angular/platform-browser-dynamic": "^16.2.0",
+    "@angular/router": "^16.2.0",
+    "@syncfusion/ej2-angular-grids": "^22.2.11",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.12.0"
+    "zone.js": "~0.13.0",
+    "@syncfusion/ej2-material-theme": "~22.2.11"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.4",
-    "@angular/cli": "~15.1.4",
-    "@angular/compiler-cli": "^15.1.0",
+    "@angular-devkit/build-angular": "^16.2.1",
+    "@angular/cli": "~16.2.1",
+    "@angular/compiler-cli": "^16.2.0",
     "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~4.5.0",
+    "jasmine-core": "~4.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.1.3"
   }
-}
+}

package.json

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app-routing.module.ts

@@ -481,3 +481,4 @@ <h2>Next Steps</h2>
 <!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 
+<router-outlet></router-outlet>

src/app/app.component.html

@@ -1,31 +1,29 @@
 import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [RouterTestingModule],
+    declarations: [AppComponent]
+  }));
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'tree-shaking'`, () => {
+  it(`should have as title 'syncfusion-angular-app'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('tree-shaking');
+    expect(app.title).toEqual('syncfusion-angular-app');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('tree-shaking app is running!');
+    expect(compiled.querySelector('.content span')?.textContent).toContain('syncfusion-angular-app app is running!');
   });
 });

src/app/app.component.spec.ts

@@ -1,9 +1,5 @@
-import { enableRipple } from '@syncfusion/ej2-base';
 import { Component } from '@angular/core';
 
-// enable ripple effects
-enableRipple(true);
-
 @Component({
   selector: 'app-root',
   template: `
@@ -19,8 +15,8 @@ enableRipple(true);
       <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
     </e-columns>
   </ejs-grid>
-  `
-})
+ `
+ })
 export class AppComponent {
   public data: Object[] = [
     {

src/app/app.component.ts

@@ -1,15 +1,18 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { GridAllModule } from '@syncfusion/ej2-angular-grids';
+import { GridModule, PagerModule } from '@syncfusion/ej2-angular-grids';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule, GridAllModule
+    BrowserModule,
+    AppRoutingModule,
+    GridModule, PagerModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>TreeShaking</title>
+  <title>SyncfusionAngularApp</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">