Update deps

templates/node-angular/angular.json

@@ -11,10 +11,8 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/node-angular",
-            "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
               "zone.js"
@@ -28,8 +26,7 @@
             ],
             "styles": [
               "src/styles.css"
-            ],
-            "scripts": []
+            ]
           },
           "configurations": {
             "production": {
@@ -56,7 +53,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "node-angular:build:production"
@@ -68,10 +65,10 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",
@@ -86,8 +83,7 @@
             ],
             "styles": [
               "src/styles.css"
-            ],
-            "scripts": []
+            ]
           }
         }
       }

templates/node-angular/eslint.config.mjs

@@ -1,51 +1,70 @@
-import globals from "globals";
-import js from "@eslint/js";
-import nodePlugin from "eslint-plugin-n";
-import tseslintPlugin from "@typescript-eslint/eslint-plugin";
-import tseslintParser from "@typescript-eslint/parser";
+/*
+**
+** Copyright (c) 2024, Oracle and/or its affiliates.
+** All rights reserved
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/
+*/
+import js from '@eslint/js'
+import globals from 'globals'
+import nodePlugin from 'eslint-plugin-n'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default [
+export default defineConfig([
+  // Ignore dist folder globally
+  globalIgnores(['dist']),
+
+  // Frontend (React)
   {
-    files: ["src/**/*.js","src/**/*.ts"],
+    files: ['src/**/*.js', 'src/**/*.jsx'],
     languageOptions: {
       ecmaVersion: 2022,
-      sourceType: "module",
-      parser: tseslintParser,  
+      sourceType: 'module',
       parserOptions: {
         ecmaFeatures: {
-          modules: true
-        },
-        ecmaVersion: "2022",
-        project: "./tsconfig.json",  
+          jsx: true
+        }
       },
       globals: {
-        ...globals.browser,
+        ...globals.browser
       }
     },
     plugins: {
-      "@typescript-eslint": tseslintPlugin
+      react: reactPlugin,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh
+    },
+    settings: {
+      react: { version: 'detect' }
     },
     rules: {
       ...js.configs.recommended.rules,
-      ...tseslintPlugin.configs["eslint-recommended"].overrides[0].rules,
-      ...tseslintPlugin.configs["recommended"].rules,
+      ...reactPlugin.configs.flat.recommended.rules,
+      ...reactPlugin.configs.flat['jsx-runtime'].rules,
+      ...reactHooks.configs['recommended-latest'].rules,
+      ...reactRefresh.configs.vite.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }]
     }
   },
+
+  // Backend (Node.js)
   {
-    files: ["server/**/*.js", "server/**/*.cjs"],
+    files: ['server/**/*.js', 'server/**/*.cjs'],
     languageOptions: {
       ecmaVersion: 2022,
-      sourceType: "module",
+      sourceType: 'module',
       globals: {
-        ...globals.node,
+        ...globals.node
       }
     },
     plugins: {
       n: nodePlugin
     },
     rules: {
       ...js.configs.recommended.rules,
-      ...nodePlugin.configs["flat/recommended-script"].rules
+      ...nodePlugin.configs['flat/recommended-script'].rules
     }
   }
-];
+])

templates/node-angular/package.json

@@ -10,43 +10,50 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
+  "prettier": {
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/compiler": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.0",
-    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/router": "^19.2.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/router": "^20.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0",
     "body-parser": "^2.2.0",
     "cors": "^2.8.5",
-    "dotenv": "^16.5.0",
+    "dotenv": "^17.1.0",
     "express": "^5.1.0",
     "morgan": "^1.10.0",
-    "oracledb": "^6.8.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.15.0"
+    "oracledb": "^6.7.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.8",
-    "@angular/cli": "^19.2.8",
-    "@angular/compiler-cli": "^19.2.0",
-    "@eslint/js": "^9.25.1",
+    "@angular/build": "^20.0.6",
+    "@angular/cli": "^20.0.6",
+    "@angular/compiler-cli": "^20.0.0",
     "@types/jasmine": "~5.1.0",
-    "@typescript-eslint/eslint-plugin": "^8.31.0",
-    "@typescript-eslint/parser": "^8.31.0",
-    "concurrently": "^9.1.2",
-    "eslint": "^9.25.1",
-    "eslint-plugin-n": "^17.17.0",
-    "globals": "^16.0.0",
-    "jasmine-core": "~5.6.0",
+    "jasmine-core": "~5.7.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.7.2"
+    "typescript": "~5.8.2",
+    "@eslint/js": "^9.18.0",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.18.0",
+    "eslint-plugin-n": "^17.15.1",
+    "globals": "^16.3.0"
   }
 }

templates/node-angular/src/app/app.config.ts

@@ -1,8 +1,12 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes)
+  ]
 };

templates/node-angular/src/app/app.component.html → templates/node-angular/src/app/app.html

@@ -1,7 +1,7 @@
 <div id="root">
   <div>
     <a href="https://www.oracle.com/database/" target="_blank">
-      <img src="{{ oracleLogo }}" class="logo" alt="Oracle logo" />
+     <img src="{{ oracleLogo }}" class="logo" alt="Oracle logo" />
     </a>
     <a href="https://angular.io/" target="_blank">
       <img src="{{ angularLogo }}" class="logo angular" alt="Angular logo" />
@@ -17,3 +17,5 @@ <h1>{{ checkingConnection }}</h1>
     Click on the Oracle and Angular logos to learn more
   </p>
 </div>
+
+<router-outlet />

templates/node-angular/src/app/app.component.spec.ts → templates/node-angular/src/app/app.spec.ts

@@ -1,27 +1,21 @@
 import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import { App } from './app';
 
-describe('AppComponent', () => {
+describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
+      imports: [App],
     }).compileComponents();
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
-  it(`should have the 'node-angular' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('node-angular');
-  });
-
   it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, node-angular');

templates/node-angular/src/app/app.component.ts → templates/node-angular/src/app/app.ts

@@ -1,19 +1,19 @@
 import { Component, OnInit } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
-  standalone: true, 
+  imports: [RouterOutlet],
+  templateUrl: './app.html',
+  styleUrl: './app.css'
 })
-export class AppComponent implements OnInit {
-  oracleLogo = '/assets/oracle.svg'
-  angularLogo = '/assets/angular.svg'
+export class App implements OnInit {
   title: string = 'node-angular';
+  oracleLogo = 'assets/oracle.svg'
+  angularLogo = 'assets/angular.svg'
   isConnected?: boolean;
 
-
-  async ngOnInit() {
+    async ngOnInit() {
     try {
       const response = await fetch('http://localhost:3000/api/connection/status');
       const data = await response.json();
@@ -37,4 +37,4 @@ export class AppComponent implements OnInit {
       return 'Something is wrong with the database!';
     }
   }
-}
+}