Skip to content

Angular 17 Sample updated. #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Balaji-Elumalai wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Angular 17 Sample updated. #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 10 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
# Tree Shaking in Angular
# Syncfusion Angular Tree Shaking

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.
This project demonstrates tree shaking with Syncfusion Angular components. For further details, refer to the [Syncfusion Angular Tree Shaking](https://ej2.syncfusion.com/angular/documentation/frameworks-and-feature/tree-shaking) documentation.

## Using Syncfusion with Tree Shaking
## Run the sample project

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.
* Clone the repository of the Syncfusion Angular Tree Shaking project by using the git clone command.

## Implementing Tree Shaking in an Angular Application
```bash
git clone https://github.com/SyncfusionExamples/syncfusion-angular-tree-shaking.git
```

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.
* Use NPM to install the required dependencies by running the `npm install` command.

### Steps to Enable Tree Shaking
* Run `npm run build:map` to build the project and generate [source maps](https://angular.io/cli/build#options) for analyzing the bundle size. The build artifacts will be stored in the `dist/` directory. Source maps slightly increase the bundle size and are not recommended for production. Here, we use source maps to analyze the bundle size of the application.

Follow these steps to enable Tree Shaking in your Angular application,

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/).

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.

By adhering to these steps and integrating tree shaking into your Angular application, you can significantly enhance performance and elevate the user experience.
* Run `npm run analyze` to analyze the bundle size of the application. The Analyzer tool will be launched in the browser with the bundle size details.
48 changes: 19 additions & 29 deletions angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@
"version": 1,
"newProjectRoot": "projects",
"projects": {
"syncfusion-angular-app": {
"Syncfusion-Angular-Tree-Shaking": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/syncfusion-angular-app",
"outputPath": "dist/syncfusion-angular-tree-shaking",
"index": "src/index.html",
"main": "src/main.ts",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
Expand All @@ -25,41 +25,35 @@
"src/assets"
],
"styles": [
"src/styles.css",
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "6mb",
"maximumError": "6mb"
"maximumWarning": "5mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
"outputHashing": "all",
"optimization": true,
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
"sourceMap": true
}
},
"defaultConfiguration": "production"
Expand All @@ -68,18 +62,18 @@
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "syncfusion-angular-app:build:production"
"buildTarget": "Syncfusion-Angular-Tree-Shaking:build:production"
},
"development": {
"browserTarget": "syncfusion-angular-app:build:development"
"buildTarget": "Syncfusion-Angular-Tree-Shaking:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "syncfusion-angular-app:build"
"buildTarget": "Syncfusion-Angular-Tree-Shaking:build"
}
},
"test": {
Expand All @@ -95,16 +89,12 @@
"src/assets"
],
"styles": [
"src/styles.css",
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
"src/styles.css"
],
"scripts": []
}
}
}
}
},
"cli": {
"analytics": "ec65ef7b-4313-4c7f-9d42-d3587151da1b"
}
}
}
42 changes: 22 additions & 20 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,42 @@
{
"name": "syncfusion-angular-app",
"name": "syncfusion-angular-tree-shaking",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:map": "ng build --source-map=true",
"watch": "ng build --watch --configuration development",
"test": "ng test"
"test": "ng test",
"analyze": "source-map-explorer dist/syncfusion-angular-tree-shaking/**/*.js --no-border-checks"
},
"private": true,
"dependencies": {
"@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",
"@angular/animations": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular/compiler": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/forms": "^17.0.0",
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/router": "^17.0.0",
"@syncfusion/ej2-angular-grids": "^24.1.43",
"rxjs": "~7.8.0",
"source-map-explorer": "^2.5.3",
"tslib": "^2.3.0",
"zone.js": "~0.13.0",
"@syncfusion/ej2-material-theme": "~22.2.11"
"zone.js": "~0.14.2"
},
"devDependencies": {
"@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.6.0",
"@angular-devkit/build-angular": "^17.0.7",
"@angular/cli": "^17.0.7",
"@angular/compiler-cli": "^17.0.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.1.3"
"typescript": "~5.2.2"
}
}
}
Loading