Update @angular/cli to 16.1.4

* using swaaplate 2.5.3

.eslintrc.json

@@ -38,7 +38,8 @@
         "*.html"
       ],
       "extends": [
-        "plugin:@angular-eslint/template/recommended"
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
       ],
       "rules": {}
     }

README.md

@@ -7,18 +7,18 @@ Coronavirus (COVID-19) cases in Germany, Saxony and Leipzig.
 
 This app is online under [covid-19.inpercima.net](http://covid-19.inpercima.net).
 
-This project was generated with [swaaplate](https://github.com/inpercima/swaaplate) version 2.5.1.
+This project was generated with [swaaplate](https://github.com/inpercima/swaaplate) version 2.5.3.
 
 ## Prerequisites
 
 ### Angular CLI
 
-* `angular-cli 15.2.4` or higher
+* `@angular/cli 16.1.4` or higher
 
 ### Node, npm or yarn
 
-* `node 18.14.2` or higher in combination with
-  * `npm 9.5.0` or higher or
+* `node 18.16.0` or higher in combination with
+  * `npm 9.5.1` or higher or
   * `yarn 1.22.19` or higher, used in this repository
 
 ## Getting started

angular.json

@@ -4,14 +4,26 @@
   "cli": {
     "packageManager": "yarn",
     "schematicCollections": [
-      "@angular-eslint/schematics"
+      "@angular-eslint/schematics",
+      "@cypress/schematic",
+      "@schematics/angular"
     ]
   },
   "newProjectRoot": "projects",
   "projects": {
     "covid-19": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "standalone": true
+        },
+        "@schematics/angular:directive": {
+          "standalone": true
+        },
+        "@schematics/angular:pipe": {
+          "standalone": true
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "covid",

cypress.config.ts

@@ -1,19 +1,14 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
-
   e2e: {
-    'baseUrl': 'http://localhost:4200',
-    supportFile: false
+    baseUrl: 'http://localhost:4200',
   },
-
-
   component: {
     devServer: {
       framework: 'angular',
       bundler: 'webpack',
     },
-    specPattern: '**/*.cy.ts'
-  }
-
-})
+    specPattern: '**/*.cy.ts',
+  },
+});

package.json

@@ -7,51 +7,51 @@
     }
   ],
   "dependencies": {
-    "@angular/animations": "15.2.3",
-    "@angular/cdk": "15.2.3",
-    "@angular/common": "15.2.3",
-    "@angular/compiler": "15.2.3",
-    "@angular/core": "15.2.3",
-    "@angular/forms": "15.2.3",
-    "@angular/material": "15.2.3",
-    "@angular/platform-browser": "15.2.3",
-    "@angular/platform-browser-dynamic": "15.2.3",
+    "@angular/animations": "16.1.5",
+    "@angular/cdk": "16.1.5",
+    "@angular/common": "16.1.5",
+    "@angular/compiler": "16.1.5",
+    "@angular/core": "16.1.5",
+    "@angular/forms": "16.1.5",
+    "@angular/material": "16.1.5",
+    "@angular/platform-browser": "16.1.5",
+    "@angular/platform-browser-dynamic": "16.1.5",
     "autoprefixer": "10.4.14",
-    "chart.js": "4.2.1",
-    "material-icons": "1.13.2",
+    "chart.js": "4.3.0",
+    "material-icons": "1.13.8",
     "ng2-charts": "4.1.1",
-    "rxjs": "7.8.0",
-    "tslib": "2.5.0",
-    "zone.js": "0.13.0"
+    "rxjs": "7.8.1",
+    "tslib": "2.6.0",
+    "zone.js": "0.13.1"
   },
   "description": "Coronavirus (COVID-19) cases in Germany, Saxony and Leipzig.",
   "devDependencies": {
-    "@angular-devkit/build-angular": "15.2.4",
-    "@angular-eslint/builder": "15.2.1",
-    "@angular-eslint/eslint-plugin": "15.2.1",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
-    "@angular-eslint/schematics": "15.2.1",
-    "@angular-eslint/template-parser": "15.2.1",
-    "@angular/cli": "15.2.4",
-    "@angular/compiler-cli": "15.2.3",
+    "@angular-devkit/build-angular": "16.1.4",
+    "@angular-eslint/builder": "16.1.0",
+    "@angular-eslint/eslint-plugin": "16.1.0",
+    "@angular-eslint/eslint-plugin-template": "16.1.0",
+    "@angular-eslint/schematics": "16.1.0",
+    "@angular-eslint/template-parser": "16.1.0",
+    "@angular/cli": "16.1.4",
+    "@angular/compiler-cli": "16.1.5",
     "@cypress/schematic": "2.5.0",
-    "@types/jasmine": "4.3.1",
-    "@typescript-eslint/eslint-plugin": "5.55.0",
-    "@typescript-eslint/parser": "5.55.0",
-    "cypress": "12.8.1",
-    "eslint": "8.36.0",
-    "jasmine-core": "4.6.0",
-    "karma": "6.4.1",
-    "karma-chrome-launcher": "3.1.1",
-    "karma-coverage": "2.2.0",
+    "@types/jasmine": "4.3.5",
+    "@typescript-eslint/eslint-plugin": "6.0.0",
+    "@typescript-eslint/parser": "6.0.0",
+    "cypress": "12.17.1",
+    "eslint": "8.45.0",
+    "jasmine-core": "5.0.1",
+    "karma": "6.4.2",
+    "karma-chrome-launcher": "3.2.0",
+    "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
-    "karma-jasmine-html-reporter": "2.0.0",
-    "postcss": "8.4.21",
-    "tailwindcss": "3.2.7",
-    "typescript": "4.9.5"
+    "karma-jasmine-html-reporter": "2.1.0",
+    "postcss": "8.4.26",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.1.6"
   },
   "engines": {
-    "node": ">=18.14.2"
+    "node": ">=18.16.0"
   },
   "homepage": "https://inpercima.github.io/covid-19/",
   "license": "MIT",

src/app/app.component.spec.ts

@@ -1,19 +1,12 @@
 import { TestBed } from '@angular/core/testing';
-import { MatToolbarModule } from '@angular/material/toolbar';
 
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        MatToolbarModule,
-      ],
-      declarations: [
-        AppComponent,
-      ],
-    }).compileComponents();
-  });
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [HttpClientTestingModule],
+  }));
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

src/app/app.component.ts

@@ -1,17 +1,21 @@
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, HostBinding, TemplateRef } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
 import { Title } from '@angular/platform-browser';
 
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { environment } from '../environments/environment';
+import { DashboardComponent } from './features/dashboard/dashboard.component';
 
 @Component({
-  selector: 'covid-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+    selector: 'covid-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css'],
+    standalone: true,
+    imports: [MatButtonModule, MatDialogModule, MatToolbarModule, DashboardComponent],
 })
 export class AppComponent {
-
   public appname: string;
 
   // Adds the custom theme to the app root.
@@ -26,7 +30,7 @@ export class AppComponent {
 
   openDialog(ref: TemplateRef<any>): void {
     this.dialog.open(ref, {
-      maxWidth: "800px",
+      maxWidth: '800px',
     });
   }
 }

src/app/app.config.ts

@@ -0,0 +1,9 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+export const appConfig: ApplicationConfig = {
+  providers: [importProvidersFrom(BrowserModule, OverlayModule), provideHttpClient(), provideAnimations()],
+};

src/app/features/dashboard/dashboard.component.spec.ts

@@ -2,23 +2,15 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DashboardComponent } from './dashboard.component';
-import { MatCardModule } from '@angular/material/card';
 
 describe('DashboardComponent', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        DashboardComponent,
-      ],
-      imports: [
-        HttpClientTestingModule,
-        MatCardModule,
-      ],
-    })
-    .compileComponents();
+      imports: [HttpClientTestingModule],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(DashboardComponent);
     component = fixture.componentInstance;

src/app/features/dashboard/dashboard.component.ts

@@ -2,11 +2,16 @@ import { Component, OnInit } from '@angular/core';
 
 import { ChartConfiguration } from 'chart.js';
 
+import { NgIf } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { NgChartsModule } from 'ng2-charts';
 import { DataService } from './data.service';
 
 @Component({
   selector: 'covid-dashboard',
   templateUrl: './dashboard.component.html',
+  standalone: true,
+  imports: [MatCardModule, NgIf, NgChartsModule],
 })
 export class DashboardComponent implements OnInit {
   chartData: ChartConfiguration['data'] = {

src/app/features/dashboard/data.service.spec.ts

@@ -8,9 +8,7 @@ describe('DataService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-      ],
+      imports: [HttpClientTestingModule],
     });
     service = TestBed.inject(DataService);
   });