Angular - Updating TODO sample applications

TodoApp-SingleLayer/Angular-EfCore/angular/angular.json

@@ -19,12 +19,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/TodoApp",
+            "outputPath": {
+              "base": "dist/TodoApp"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "allowedCommonJsDependencies": ["chart.js", "js-sha256"],
@@ -108,7 +111,8 @@
               "node_modules/bootstrap-icons/font/bootstrap-icons.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -133,9 +137,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -144,25 +146,25 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "TodoApp:build:production"
+              "buildTarget": "TodoApp:build:production"
             },
             "development": {
-              "browserTarget": "TodoApp:build:development"
+              "buildTarget": "TodoApp:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
-            "browserTarget": "TodoApp:build"
+            "buildTarget": "TodoApp:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",

TodoApp-SingleLayer/Angular-EfCore/angular/karma.conf.js

@@ -10,7 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+
     ],
     client: {
       jasmine: {

TodoApp-SingleLayer/Angular-EfCore/angular/package.json

@@ -12,42 +12,42 @@
   },
   "private": true,
   "dependencies": {
-    "@abp/ng.account": "^8.3.0",
-    "@abp/ng.components": "^8.3.0",
-    "@abp/ng.core": "^8.3.0",
-    "@abp/ng.oauth": "^8.3.0",
-    "@abp/ng.identity": "^8.3.0",
-    "@abp/ng.setting-management": "^8.3.0",
-    "@abp/ng.tenant-management": "^8.3.0",
-    "@abp/ng.theme.shared": "^8.3.0",
-    "@abp/ng.theme.lepton-x": "~3.3.0",
-    "@angular/animations": "^18.1.0",
-    "@angular/common": "^18.1.0",
-    "@angular/compiler": "^18.1.0",
-    "@angular/core": "^18.1.0",
-    "@angular/forms": "^18.1.0",
-    "@angular/localize": "^18.1.0",
-    "@angular/platform-browser": "^18.1.0",
-    "@angular/platform-browser-dynamic": "^18.1.0",
-    "@angular/router": "^18.1.0",
-    "rxjs": "7.5.6",
-    "tslib": "^2.1.0",
+    "@abp/ng.account": "~9.3.6",
+    "@abp/ng.components": "~9.3.6",
+    "@abp/ng.core": "~9.3.6",
+    "@abp/ng.oauth": "~9.3.6",
+    "@abp/ng.identity": "~9.3.6",
+    "@abp/ng.setting-management": "~9.3.6",
+    "@abp/ng.tenant-management": "~9.3.6",
+    "@abp/ng.theme.shared": "~9.3.6",
+    "@abp/ng.theme.lepton-x": "~4.3.6",
+    "@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/localize": "~20.0.0",
+    "@angular/platform-browser": "~20.0.0",
+    "@angular/platform-browser-dynamic": "~20.0.0",
+    "@angular/router": "~20.0.0",
+    "rxjs": "~7.8.0",
     "bootstrap-icons": "~1.8.3",
-    "zone.js": "~0.14.0"
+    "tslib": "^2.0.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@abp/ng.schematics": "^8.3.0",
-    "@angular-devkit/build-angular": "^18.1.0",
-    "@angular-eslint/builder": "~18.1.0",
-    "@angular-eslint/eslint-plugin": "~18.1.0",
-    "@angular-eslint/eslint-plugin-template": "~18.1.0",
-    "@angular-eslint/schematics": "~18.1.0",
-    "@angular-eslint/template-parser": "~18.1.0",
-    "@angular/cli": "^18.1.0",
-    "@angular/compiler-cli": "^18.1.0",
-    "@angular/language-service": "^18.1.0",
+    "@abp/ng.schematics": "~9.3.6",
+    "@angular-eslint/builder": "~20.0.0",
+    "@angular-eslint/eslint-plugin": "~20.0.0",
+    "@angular-eslint/eslint-plugin-template": "~20.0.0",
+    "@angular-eslint/schematics": "~20.0.0",
+    "@angular-eslint/template-parser": "~20.0.0",
+    "@angular/build": "~20.0.0",
+    "@angular/cli": "~20.0.0",
+    "@angular/compiler-cli": "~20.0.0",
+    "@angular/language-service": "~20.0.0",
     "@types/jasmine": "~3.6.0",
-    "@types/node": "^12.11.1",
+    "@types/node": "^20.0.0",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "eslint": "^8.23.0",
@@ -57,7 +57,7 @@
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "ng-packagr": "^18.1.0",
-    "typescript": "~5.4.0"
+    "ng-packagr": "~20.0.0",
+    "typescript": "~5.8.0"
   }
-}
+}

TodoApp-SingleLayer/Angular-EfCore/angular/src/app/app.component.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
+import {LoaderBarComponent} from "@abp/ng.theme.shared";
+import {DynamicLayoutComponent} from "@abp/ng.core";
 
 @Component({
   selector: 'app-root',
   template: `
-    <abp-loader-bar></abp-loader-bar>
-    <abp-dynamic-layout></abp-dynamic-layout>
+    <abp-loader-bar/>
+    <abp-dynamic-layout/>
   `,
+  imports: [LoaderBarComponent, DynamicLayoutComponent]
 })
 export class AppComponent {}

TodoApp-SingleLayer/Angular-EfCore/angular/src/app/app.config.ts

@@ -0,0 +1,42 @@
+import { provideAbpCore, withOptions } from '@abp/ng.core';
+import { provideAbpOAuth } from '@abp/ng.oauth';
+import { provideSettingManagementConfig } from '@abp/ng.setting-management/config';
+import { provideFeatureManagementConfig } from '@abp/ng.feature-management';
+import { provideAbpThemeShared } from '@abp/ng.theme.shared';
+import { provideLogo, withEnvironmentOptions } from '@volo/ngx-lepton-x.core';
+import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
+import { environment } from '../environments/environment';
+import { APP_ROUTES } from './app.routes';
+import { APP_ROUTE_PROVIDER } from './route.provider';
+import {registerLocale} from '@abp/ng.core/locale';
+import {provideThemeLeptonX} from "@abp/ng.theme.lepton-x";
+import {provideTenantManagementConfig} from "@abp/ng.tenant-management/config";
+import {provideIdentityConfig} from "@abp/ng.identity/config";
+import {provideAccountConfig} from "@abp/ng.account/config";
+import {provideSideMenuLayout} from "@abp/ng.theme.lepton-x/layouts";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(APP_ROUTES),
+    APP_ROUTE_PROVIDER,
+    provideAnimations(),
+    provideAbpCore(
+      withOptions({
+        environment,
+        registerLocaleFn: registerLocale(),
+      }),
+    ),
+    provideAbpOAuth(),
+    provideSettingManagementConfig(),
+    provideFeatureManagementConfig(),
+    provideAbpThemeShared(),
+    provideSideMenuLayout(),
+    provideThemeLeptonX(),
+    provideTenantManagementConfig(),
+    provideIdentityConfig(),
+    provideAccountConfig(),
+    provideLogo(withEnvironmentOptions(environment))
+  ]
+};

TodoApp-SingleLayer/Angular-EfCore/angular/src/app/app.routes.ts

@@ -0,0 +1,27 @@
+import { Routes } from '@angular/router';
+
+export const APP_ROUTES: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    loadComponent: () => import('./home/home.component').then(c => c.HomeComponent),
+  },
+  {
+    path: 'account',
+    loadChildren: () => import('@abp/ng.account').then(c => c.createRoutes()),
+  },
+  {
+    path: 'identity',
+    loadChildren: () => import('@abp/ng.identity').then(c => c.createRoutes()),
+  },
+  {
+    path: 'tenant-management',
+    loadChildren: () =>
+      import('@abp/ng.tenant-management').then(c => c.createRoutes()),
+  },
+  {
+    path: 'setting-management',
+    loadChildren: () =>
+      import('@abp/ng.setting-management').then(c => c.createRoutes()),
+  },
+];

TodoApp-SingleLayer/Angular-EfCore/angular/src/app/home/home.component.html

@@ -17,10 +17,12 @@
       </form>
       <!-- TODO ITEMS LIST -->
       <ul id="TodoList">
-        <li *ngFor="let todoItem of todoItems">
-          <i class="fa fa-trash-o" (click)="delete(todoItem.id)"></i> {{ todoItem.text }}
-        </li>
+        @for (todoItem of todoItems; track todoItem.id) {
+          <li>
+            <i class="fa fa-trash-o" (click)="delete(todoItem.id)"></i> {{ todoItem.text }}
+          </li>
+        }
       </ul>
     </div>
   </div>
-</div>
+</div>