Feature/nx 17 angular (#41)

* [nx-17] update to 17

* [nx-17] update nx linter

* [NX-17] repair nx

* [NX-17] consisted executor for eslint

* [NX-17] update all other dependencies

* [NX-17] remove withFetch due no support node 18 in jest

* create nx cloud github action

* [NX-17] wait for ngrx 17 is released to take this workflow be affected

.github/workflows/ci.yml.test

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+# Needed for nx-set-shas within nx-cloud-main.yml, when run on the main branch
+permissions:
+  actions: read
+  contents: read
+
+jobs:
+  main:
+    name: Nx Cloud - Main Job
+    uses: nrwl/ci/.github/workflows/[email protected]
+    with:
+      main-branch-name: main
+      number-of-agents: 3
+      init-commands: |
+        npx nx-cloud start-ci-run --stop-agents-after="build" --agent-count=3
+      parallel-commands: |
+        npx nx-cloud record -- npx nx format:check
+      parallel-commands-on-agents: |
+        npx nx affected --target=lint --parallel=3
+        npx nx affected --target=test --parallel=3 --ci --code-coverage
+        npx nx affected --target=build --parallel=3
+
+  agents:
+    name: Nx Cloud - Agents
+    uses: nrwl/ci/.github/workflows/[email protected]
+    with:
+      number-of-agents: 3

.gitignore

@@ -57,4 +57,5 @@ documentation
 .angular
 
 # NX
-NX
+NX
+.nx/cache

.nvmrc

@@ -1 +1 @@
-v18.12.1
+v20.9.0

.prettierignore

@@ -4,4 +4,5 @@ dist
 documentation
 reports
 test-reports
-package-lock.json
+package-lock.json
+/.nx/cache

CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## [11.0.0](https://github.com/rickvandermey/angular-starterkit/tree/11.0.0)
+
+### Breaking Change
+
+-   **NX:** Updated to NX 17
+-   **Node.js**: nvm use 20
+-   **Angular:** Updated to Angular 17
+-   **Docker:** Updated to Node 20.9.0
+
 ## [10.0.0](https://github.com/rickvandermey/angular-starterkit/tree/10.0.0)
 
 ### Breaking Change

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.17.1-alpine AS final
+FROM node:20.9.0-alpine AS final
 
 WORKDIR /app
 ENV NODE_ENV production

README.md

@@ -1,35 +1,32 @@
 [![Build Status](https://travis-ci.com/rickvandermey/angular-starterkit.svg?branch=master)](https://travis-ci.com/rickvandermey/angular-starterkit)
 [![codecov](https://codecov.io/gh/rickvandermey/angular-starterkit/branch/master/graph/badge.svg)](https://codecov.io/gh/rickvandermey/angular-starterkit)
 [![RVDM-Angular-Starterkit](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/i6rrnt&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/i6rrnt/runs)
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=RVDM-Angular-Starterkit&metric=alert_status)](https://sonarcloud.io/dashboard?id=RVDM-Angular-Starterkit)
-[![dependencies Status](https://david-dm.org/rickvandermey/angular-starterkit.svg)](https://david-dm.org/rickvandermey/angular-starterkit)
-[![devDependencies Status](https://david-dm.org/rickvandermey/angular-starterkit/dev-status.svg)](https://david-dm.org/rickvandermey/angular-starterkit?type=dev)
+[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=rickvandermey_angular-starterkit&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=rickvandermey_angular-starterkit)
 
 # Blazing fast advanced Angular Starterkit
 
 Powerful Starterkit combining all latest advanced Angular features. Strict typescript mode and preventing pushing untested code. Read more for all features.
 
 ## Features
 
--   ⭐️ Angular 16
+-   ⭐️ Angular 17
 -   🎁 Monorepo with NX.dev
 -   ⭐️ NGRX store (implemented according ngrx.io)
--   😴 Lazy Loading
--   ⭐️ HttpInterceptor
 -   ⭐️ NGX-Translate (assets/i18n/{locale}.json)
 -   🚀 SSR (Server Side Rendering)
 -   😍 PWA (Progressive Web App)
 -   😍 Service Worker detects new build versions
 -   🤓 Unit Test (Jest)
 -   🕹️ E2E Test / Reports (Playwright / Cucumber)
+-   🕹️ A11Y Test (Axe Core in E2E)
 -   🚀 Visual Testing (Storybook / Playwright)
 -   📖 Storybook
 -   🖌️ Tailwind
 -   🎯 Git hooks (husky)
 -   🤩 Ability to Mock data (mockServer) (Docker)
 -   🎰 WebPush integration (mockServer and PWA)
 
-##### Quickstart:
+### Quickstart:
 
 -   Install modules: `npm ci`
 -   MAC: `npm run certificate:generate:mac && nx run <project>:serve [options]`
@@ -48,12 +45,6 @@ NRWL nx.dev monorepo, [see all commands](https://nx.dev/l/a/cli/serve)
 
 Because we are running localhost on SSL (https), you will need to generate a certificate and key, and place them in a folder called `build`. Run `npm run certificate:generate:mac` to create the required certificates and place them in the required folder.
 
-### Git hooks 🎯
-
-Git hooks are active, which means you only can commit when there are no linting errors, and all unit-tests succeeds. Other commmands can be implemented with `husky`.
-
-When using nvm, the default node should be > 14. `nvm alias stable default`
-
 ## Build
 
 NRWL nx.dev monorepo, [see all commands](https://nx.dev/l/a/cli/build)
@@ -76,14 +67,14 @@ This project comes with built-in SSR functionality. The effect of SSR will be va
 -   `nx run <project>:test [options]` - Unit test Watcher (only runs tests for changed files)
 -   `nx run <project>:e2e [options]` - End to End test with Playwright and reports with Cucumber
 
-### Running unit tests with Jest 🤓
+### Unit tests with Jest 🤓
 
 Run `nx run <project>:test [options` to execute the unit tests via [Jest](https://jestjs.io/).
 Run `npm run affected:test` to execute a all unit tests for affected libs and apps.
 
 Both scripts will provide a Code Coverage file, which can be found in _'./test-reports/<apps|libs>/\<project>/coverage'_
 
-### Running E2E tests with Playwright and Cucumber 🤓
+### E2E tests with Playwright and Cucumber and Axe Core (A11y) 🤓
 
 Run `nx run <project>:e2e [options]` to execute the E2E Playwright tests.
 
@@ -107,3 +98,9 @@ As of version 2.1.0 the mockServer is running through Docker and runs with HTTPS
 
 Do a POST call to `https://localhost:4000/notification` to create a mocked push notification.
 Best can be tested after `nx run <project>:build [options]` and then serve the correct folder as `http-server`. The application will then be available at `https://localhost:8081`
+
+## Git hooks 🎯
+
+Git hooks are active, which means you only can commit when there are no linting errors, and all unit-tests succeeds. Other commmands can be implemented with `husky`.
+
+When using nvm, the default node should be > 18. `nvm alias stable default`

apps/mockserver/project.json

@@ -1,19 +1,19 @@
 {
-	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"name": "mockserver",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"projectType": "application",
 	"sourceRoot": "apps/mockserver/src",
 	"tags": [],
 	"targets": {
 		"lint": {
-			"executor": "@nx/linter:eslint",
+			"executor": "@nx/eslint:lint",
 			"options": {
 				"lintFilePatterns": ["apps/mockserver/**/*.ts"]
 			},
 			"outputs": ["{options.outputFile}"]
 		},
 		"lint:ci": {
-			"executor": "@nx/linter:eslint",
+			"executor": "@nx/eslint:lint",
 			"options": {
 				"format": "checkstyle",
 				"lintFilePatterns": ["apps/mockserver/**/*.ts"],

apps/starterkit-e2e/project.json

@@ -1,4 +1,5 @@
 {
+	"name": "starterkit-e2e",
 	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"implicitDependencies": ["starterkit"],
 	"projectType": "application",
@@ -17,14 +18,14 @@
 			}
 		},
 		"lint": {
-			"executor": "@nrwl/linter:eslint",
+			"executor": "@nx/eslint:lint",
 			"options": {
 				"lintFilePatterns": ["apps/starterkit-e2e/**/*.{js,ts}"]
 			},
 			"outputs": ["{options.outputFile}"]
 		},
 		"lint-ci": {
-			"executor": "@nrwl/linter:eslint",
+			"executor": "@nx/eslint:lint",
 			"options": {
 				"format": "checkstyle",
 				"lintFilePatterns": ["apps/starterkit-e2e/**/*.ts"],

apps/starterkit/project.json

@@ -1,4 +1,5 @@
 {
+	"name": "starterkit",
 	"$schema": "../../node_modules/nx/schemas/project-schema.json",
 	"implicitDependencies": [],
 	"prefix": "app",
@@ -82,7 +83,7 @@
 			}
 		},
 		"lint": {
-			"executor": "@nrwl/linter:eslint",
+			"executor": "@nx/eslint:lint",
 			"options": {
 				"lintFilePatterns": [
 					"apps/starterkit/src/**/*.ts",
@@ -92,7 +93,7 @@
 			"outputs": ["{options.outputFile}"]
 		},
 		"lint-ci": {
-			"executor": "@nrwl/linter:eslint",
+			"executor": "@nx/eslint:lint",
 			"options": {
 				"format": "checkstyle",
 				"lintFilePatterns": [
@@ -106,15 +107,15 @@
 		"serve": {
 			"configurations": {
 				"mock": {
-					"browserTarget": "starterkit:build:mock"
+					"buildTarget": "starterkit:build:mock"
 				},
 				"production": {
-					"browserTarget": "starterkit:build:production"
+					"buildTarget": "starterkit:build:production"
 				}
 			},
 			"executor": "@angular-devkit/build-angular:dev-server",
 			"options": {
-				"browserTarget": "starterkit:build",
+				"buildTarget": "starterkit:build",
 				"port": 4202,
 				"ssl": true,
 				"sslCert": "ssl/server.crt",
@@ -175,7 +176,7 @@
 				}
 			},
 			"defaultConfiguration": "mock",
-			"executor": "@nguniversal/builders:ssr-dev-server",
+			"executor": "@angular-devkit/build-angular:ssr-dev-server",
 			"options": {
 				"port": 4202,
 				"ssl": true,
@@ -201,8 +202,7 @@
 		"test": {
 			"executor": "@nx/jest:jest",
 			"options": {
-				"jestConfig": "apps/starterkit/jest.config.ts",
-				"passWithNoTests": true
+				"jestConfig": "apps/starterkit/jest.config.ts"
 			},
 			"outputs": ["{workspaceRoot}/test-reports/apps/starterkit/coverage"]
 		}

apps/starterkit/src/ssr.server.ts

@@ -1,82 +1,62 @@
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+
 import { APP_BASE_HREF } from '@angular/common';
-import { enableProdMode } from '@angular/core';
+import { CommonEngine } from '@angular/ssr';
 
-import { ngExpressEngine } from '@nguniversal/express-engine';
-import compression from 'compression';
 import * as express from 'express';
-import * as expressHealthCheck from 'express-healthcheck';
-import { existsSync } from 'fs';
-import morgan from 'morgan';
-import { join } from 'path';
 
 import { AppServerModule } from './main.server';
 
 import 'zone.js/node';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
-	enableProdMode();
-
-	// deepcode ignore UseHelmetForExpress
 	const server = express();
 	const distFolder = join(process.cwd(), 'dist/apps/starterkit/browser');
 	const indexHtml = existsSync(join(distFolder, 'index.original.html'))
-		? 'index.original.html'
-		: 'index';
+		? join(distFolder, 'index.original.html')
+		: join(distFolder, 'index.html');
 
-	// Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
-	server.engine(
-		'html',
-		ngExpressEngine({
-			bootstrap: AppServerModule,
-		}),
-	);
+	const commonEngine = new CommonEngine();
 
-	server.use(compression());
 	server.set('view engine', 'html');
 	server.set('views', distFolder);
 
+	// Example Express Rest API endpoints
+	// server.get('/api/**', (req, res) => { });
+	// Serve static files from /browser
 	server.get(
 		'*.*',
 		express.static(distFolder, {
 			maxAge: '1y',
 		}),
 	);
 
-	server.use('/healthcheck', expressHealthCheck);
-
-	// All regular routes use the Universal engine
-	server.get('*', (req, res) => {
-		const path = req.originalUrl.endsWith('/')
-			? req.originalUrl
-			: `${req.originalUrl}/`;
-		const baseUrl = `https://${req.get('host')}`;
-		const fullUrl = `${baseUrl}${path}`;
-		res.render(indexHtml, {
-			providers: [
-				{ provide: APP_BASE_HREF, useValue: req.baseUrl },
-				{ provide: 'serverUrl', useValue: fullUrl },
-				{ provide: 'baseUrl', useValue: baseUrl },
-			],
-			req,
-		});
+	// All regular routes use the Angular engine
+	server.get('*', (req, res, next) => {
+		const { protocol, originalUrl, baseUrl, headers } = req;
+
+		commonEngine
+			.render({
+				bootstrap: AppServerModule,
+				documentFilePath: indexHtml,
+				providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+				publicPath: distFolder,
+				url: `${protocol}://${headers.host}${originalUrl}`,
+			})
+			.then((html) => res.send(html))
+			.catch((err) => next(err));
 	});
 
 	return server;
 }
 
 function run(): void {
-	const port = process.env['PORT'] || 8080;
-	const cacheMaxAge = process.env['CACHE_MAX_AGE'] || 14400;
+	const port = process.env['PORT'] || 4000;
 
 	// Start up the Node server
 	const server = app();
-	server.use(morgan('dev'));
-	// Disable powered by middleware to reduce attack surface
-	server.disable('x-powered-by');
-	// Add cache headers to everything
-	server.set('Cache-control', `public, max-age=${cacheMaxAge}`);
-
 	server.listen(port, () => {
 		console.log(
 			`Node Express server listening on http://localhost:${port}`,

apps/starterkit/tsconfig.spec.json

@@ -7,5 +7,6 @@
 		"esModuleInterop": true
 	},
 	"files": ["src/test-setup.ts"],
-	"include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+	"include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"],
+	"exclude": ["src/app/app.server.module.ts"]
 }

jest.base.config.ts

@@ -1,4 +1,6 @@
-export function getConfig(type: string, name: string) {
+import type { Config } from 'jest';
+
+export function getConfig(type: string, name: string): Config {
 	const root = type.split('/').length === 2 ? '../../../' : '../../';
 	return {
 		collectCoverage: true,