From c085daefbb604013d583f8f6a93e219d412a3e2c Mon Sep 17 00:00:00 2001 From: Sivaranjani Rajasekaran Date: Tue, 12 May 2026 13:51:17 +0530 Subject: [PATCH] Documentation(1023562): Update Package --- ServerSideEditing/ClientApp/angular.json | 105 ++++++++++++++++++ ServerSideEditing/ClientApp/package.json | 61 +++++----- .../ClientApp/src/app/app.component.html | 12 +- .../ClientApp/src/app/app.component.ts | 7 +- .../ClientApp/src/app/app.module.ts | 36 ------ .../src/app/counter/counter.component.ts | 5 +- .../app/fetch-data/fetch-data.component.ts | 7 +- .../ClientApp/src/app/home/home.component.ts | 3 + .../src/app/nav-menu/nav-menu.component.css | 61 ++-------- .../src/app/nav-menu/nav-menu.component.html | 52 ++++----- .../src/app/nav-menu/nav-menu.component.ts | 6 +- ServerSideEditing/ClientApp/src/index.html | 2 + ServerSideEditing/ClientApp/src/main.ts | 27 ++++- ServerSideEditing/ClientApp/src/styles.css | 11 ++ .../ClientApp/src/tsconfig.app.json | 8 +- ServerSideEditing/ClientApp/tsconfig.json | 6 +- 16 files changed, 242 insertions(+), 167 deletions(-) create mode 100644 ServerSideEditing/ClientApp/angular.json delete mode 100644 ServerSideEditing/ClientApp/src/app/app.module.ts diff --git a/ServerSideEditing/ClientApp/angular.json b/ServerSideEditing/ClientApp/angular.json new file mode 100644 index 0000000..1d0de97 --- /dev/null +++ b/ServerSideEditing/ClientApp/angular.json @@ -0,0 +1,105 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "ClientApp": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "css" + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/ClientApp", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "ClientApp:build:production" + }, + "development": { + "buildTarget": "ClientApp:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "ClientApp:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "src/tsconfig.spec.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + } + } + } + }, + "cli": { + "analytics": false + } +} diff --git a/ServerSideEditing/ClientApp/package.json b/ServerSideEditing/ClientApp/package.json index 9017aa8..5d5ac02 100644 --- a/ServerSideEditing/ClientApp/package.json +++ b/ServerSideEditing/ClientApp/package.json @@ -13,43 +13,38 @@ }, "private": true, "dependencies": { - "@angular/animations": "^5.2.0", - "@angular/common": "^5.2.0", - "@angular/compiler": "^5.2.0", - "@angular/core": "^5.2.0", - "@angular/forms": "^5.2.0", - "@angular/http": "^5.2.0", - "@angular/platform-browser": "^5.2.0", - "@angular/platform-browser-dynamic": "^5.2.0", - "@angular/platform-server": "^5.2.0", - "@angular/router": "^5.2.0", - "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5", + "@angular/animations": "^20.0.0", + "@angular/common": "^20.0.0", + "@angular/compiler": "^20.0.0", + "@angular/core": "^20.0.0", + "@angular/forms": "^20.0.0", + "@angular/platform-browser": "^20.0.0", + "@angular/platform-browser-dynamic": "^20.0.0", + "@angular/platform-server": "^20.0.0", + "@angular/router": "^20.0.0", "aspnet-prerendering": "^3.0.1", - "bootstrap": "^3.4.1", - "core-js": "^2.4.1", - "rxjs": "^5.5.6", - "zone.js": "^0.8.19", + "bootstrap": "^5.x", + "core-js": "^3.x", + "rxjs": "~7.8.0", + "tslib": "^2.3.0", + "zone.js": "~0.15.0", "@syncfusion/ej2-angular-treegrid": "*" }, "devDependencies": { - "@angular/cli": "~1.7.0", - "@angular/compiler-cli": "^5.2.0", - "@angular/language-service": "^5.2.0", - "@types/jasmine": "~2.8.3", - "@types/jasminewd2": "~2.0.2", - "@types/node": "~6.0.60", - "codelyzer": "^4.0.1", - "jasmine-core": "~2.8.0", - "jasmine-spec-reporter": "~4.2.1", - "karma": "~2.0.0", - "karma-chrome-launcher": "~2.2.0", - "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": "~4.1.0", - "tslint": "~5.9.1", - "typescript": "~2.5.3" + "@angular-devkit/build-angular": "^20.3.24", + "@angular/cli": "^20.0.0", + "@angular/compiler-cli": "^20.0.0", + "@angular/language-service": "^20.0.0", + "@types/jasmine": "~5.1.0", + "@types/node": "^22.0.0", + "jasmine-core": "~5.1.0", + "jasmine-spec-reporter": "~5.0.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.8.2" }, "optionalDependencies": { "node-sass": "^4.9.0" diff --git a/ServerSideEditing/ClientApp/src/app/app.component.html b/ServerSideEditing/ClientApp/src/app/app.component.html index f484c0a..56ba7d8 100644 --- a/ServerSideEditing/ClientApp/src/app/app.component.html +++ b/ServerSideEditing/ClientApp/src/app/app.component.html @@ -1,10 +1,4 @@ -
-
-
- -
-
- -
-
+ +
+
diff --git a/ServerSideEditing/ClientApp/src/app/app.component.ts b/ServerSideEditing/ClientApp/src/app/app.component.ts index a5f44c2..fbd7eec 100644 --- a/ServerSideEditing/ClientApp/src/app/app.component.ts +++ b/ServerSideEditing/ClientApp/src/app/app.component.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { NavMenuComponent } from './nav-menu/nav-menu.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], + standalone: true, + imports: [CommonModule, RouterModule, NavMenuComponent] }) export class AppComponent { title = 'app'; diff --git a/ServerSideEditing/ClientApp/src/app/app.module.ts b/ServerSideEditing/ClientApp/src/app/app.module.ts deleted file mode 100644 index 22f669c..0000000 --- a/ServerSideEditing/ClientApp/src/app/app.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpClientModule } from '@angular/common/http'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { NavMenuComponent } from './nav-menu/nav-menu.component'; -import { HomeComponent } from './home/home.component'; -import { CounterComponent } from './counter/counter.component'; -import { FetchDataComponent } from './fetch-data/fetch-data.component'; -import { TreeGridModule, ToolbarService, EditService } from '@syncfusion/ej2-angular-treegrid'; - -@NgModule({ - declarations: [ - AppComponent, - NavMenuComponent, - HomeComponent, - CounterComponent, - FetchDataComponent - ], - imports: [ - BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), - HttpClientModule, - FormsModule, - TreeGridModule, - RouterModule.forRoot([ - { path: '', component: HomeComponent, pathMatch: 'full' }, - { path: 'counter', component: CounterComponent }, - { path: 'fetch-data', component: FetchDataComponent }, - ]) - ], - providers: [ToolbarService, EditService], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/ServerSideEditing/ClientApp/src/app/counter/counter.component.ts b/ServerSideEditing/ClientApp/src/app/counter/counter.component.ts index 6b6a5ef..65d561c 100644 --- a/ServerSideEditing/ClientApp/src/app/counter/counter.component.ts +++ b/ServerSideEditing/ClientApp/src/app/counter/counter.component.ts @@ -1,8 +1,11 @@ import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'app-counter-component', - templateUrl: './counter.component.html' + templateUrl: './counter.component.html', + standalone: true, + imports: [CommonModule] }) export class CounterComponent { public currentCount = 0; diff --git a/ServerSideEditing/ClientApp/src/app/fetch-data/fetch-data.component.ts b/ServerSideEditing/ClientApp/src/app/fetch-data/fetch-data.component.ts index 189e693..6d43f2b 100644 --- a/ServerSideEditing/ClientApp/src/app/fetch-data/fetch-data.component.ts +++ b/ServerSideEditing/ClientApp/src/app/fetch-data/fetch-data.component.ts @@ -1,10 +1,13 @@ import { Component, Inject, OnInit } from '@angular/core'; -import { EditSettingsModel, ToolbarItems, SelectionSettingsModel } from '@syncfusion/ej2-angular-treegrid'; +import { CommonModule } from '@angular/common'; +import { EditSettingsModel, ToolbarItems, SelectionSettingsModel, TreeGridModule } from '@syncfusion/ej2-angular-treegrid'; import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data'; @Component({ selector: 'app-fetch-data-component', - templateUrl: './fetch-data.component.html' + templateUrl: './fetch-data.component.html', + standalone: true, + imports: [CommonModule, TreeGridModule] }) export class FetchDataComponent { diff --git a/ServerSideEditing/ClientApp/src/app/home/home.component.ts b/ServerSideEditing/ClientApp/src/app/home/home.component.ts index e5d496a..080cbd4 100644 --- a/ServerSideEditing/ClientApp/src/app/home/home.component.ts +++ b/ServerSideEditing/ClientApp/src/app/home/home.component.ts @@ -1,8 +1,11 @@ import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'app-home', templateUrl: './home.component.html', + standalone: true, + imports: [CommonModule] }) export class HomeComponent { } diff --git a/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.css b/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.css index f76d035..3eca7dc 100644 --- a/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.css +++ b/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.css @@ -1,59 +1,22 @@ -li .glyphicon { - margin-right: 10px; +/* Highlighting rules for nav menu items */ +.navbar-nav .nav-link.active { + color: #fff; + font-weight: bold; } -/* Highlighting rules for nav menu items */ -li.link-active a, -li.link-active a:hover, -li.link-active a:focus { - background-color: #4189C7; - color: white; +.navbar-nav .nav-link:hover { + color: #ddd; } /* Keep the nav menu independent of scrolling and on top of other items */ .main-nav { - position: fixed; - top: 0; - left: 0; - right: 0; + position: relative; z-index: 1; } -@media (min-width: 768px) { - /* On small screens, convert the nav menu to a vertical sidebar */ - .main-nav { - height: 100%; - width: calc(25% - 20px); - } - .navbar { - border-radius: 0px; - border-width: 0px; - height: 100%; - } - .navbar-header { - float: none; - } - .navbar-collapse { - border-top: 1px solid #444; - padding: 0px; - } - .navbar ul { - float: none; - } - .navbar li { - float: none; - font-size: 15px; - margin: 6px; - } - .navbar li a { - padding: 10px 16px; - border-radius: 4px; - } - .navbar a { - /* If a menu item's text is too long, truncate it */ - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } +/* Handle long menu item text */ +.navbar a { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } diff --git a/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.html b/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.html index de8bc0c..eb2f46d 100644 --- a/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.html +++ b/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.html @@ -1,33 +1,29 @@
-
-
- +
+
ServerSideEditing -
-
-
- + +
diff --git a/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.ts b/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.ts index 0d68605..b7c2c71 100644 --- a/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.ts +++ b/ServerSideEditing/ClientApp/src/app/nav-menu/nav-menu.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; @Component({ selector: 'app-nav-menu', templateUrl: './nav-menu.component.html', - styleUrls: ['./nav-menu.component.css'] + styleUrls: ['./nav-menu.component.css'], + standalone: true, + imports: [CommonModule, RouterModule] }) export class NavMenuComponent { isExpanded = false; diff --git a/ServerSideEditing/ClientApp/src/index.html b/ServerSideEditing/ClientApp/src/index.html index 1033301..25e16c5 100644 --- a/ServerSideEditing/ClientApp/src/index.html +++ b/ServerSideEditing/ClientApp/src/index.html @@ -7,8 +7,10 @@ + Loading... + diff --git a/ServerSideEditing/ClientApp/src/main.ts b/ServerSideEditing/ClientApp/src/main.ts index 06df183..f5feda0 100644 --- a/ServerSideEditing/ClientApp/src/main.ts +++ b/ServerSideEditing/ClientApp/src/main.ts @@ -1,7 +1,13 @@ import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { provideRouter, Routes } from '@angular/router'; +import { provideHttpClient } from '@angular/common/http'; +import { ToolbarService, EditService } from '@syncfusion/ej2-angular-treegrid'; -import { AppModule } from './app/app.module'; +import { AppComponent } from './app/app.component'; +import { HomeComponent } from './app/home/home.component'; +import { CounterComponent } from './app/counter/counter.component'; +import { FetchDataComponent } from './app/fetch-data/fetch-data.component'; import { environment } from './environments/environment'; export function getBaseUrl() { @@ -12,9 +18,22 @@ const providers = [ { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] } ]; +const routes: Routes = [ + { path: '', component: HomeComponent, pathMatch: 'full' }, + { path: 'counter', component: CounterComponent }, + { path: 'fetch-data', component: FetchDataComponent }, +]; + if (environment.production) { enableProdMode(); } -platformBrowserDynamic(providers).bootstrapModule(AppModule) - .catch(err => console.log(err)); +bootstrapApplication(AppComponent, { + providers: [ + ...providers, + provideHttpClient(), + provideRouter(routes), + ToolbarService, + EditService + ] +}).catch(err => console.log(err)); diff --git a/ServerSideEditing/ClientApp/src/styles.css b/ServerSideEditing/ClientApp/src/styles.css index 9907dc1..129edb5 100644 --- a/ServerSideEditing/ClientApp/src/styles.css +++ b/ServerSideEditing/ClientApp/src/styles.css @@ -1 +1,12 @@ /* You can add global styles to this file, and also import other style files */ +@import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; +@import '../node_modules/@syncfusion/ej2-base/styles/material3.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css'; +@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css'; +@import '../node_modules/@syncfusion/ej2-grids/styles/material3.css'; +@import '../node_modules/@syncfusion/ej2-treegrid/styles/material3.css'; \ No newline at end of file diff --git a/ServerSideEditing/ClientApp/src/tsconfig.app.json b/ServerSideEditing/ClientApp/src/tsconfig.app.json index 0d42cfc..8e5f8e8 100644 --- a/ServerSideEditing/ClientApp/src/tsconfig.app.json +++ b/ServerSideEditing/ClientApp/src/tsconfig.app.json @@ -3,9 +3,15 @@ "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", - "module": "es2015", + "module": "ES2020", "types": [] }, + "files": [ + "main.ts" + ], + "include": [ + "**/*.d.ts" + ], "exclude": [ "test.ts", "**/*.spec.ts" diff --git a/ServerSideEditing/ClientApp/tsconfig.json b/ServerSideEditing/ClientApp/tsconfig.json index bcd2543..dc85c0e 100644 --- a/ServerSideEditing/ClientApp/tsconfig.json +++ b/ServerSideEditing/ClientApp/tsconfig.json @@ -4,15 +4,17 @@ "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, + "downlevelIteration": true, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, - "target": "es5", + "target": "ES2020", + "module": "ES2020", "typeRoots": [ "node_modules/@types" ], "lib": [ - "es2017", + "ES2020", "dom" ] }