diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index db97ec59c3..4405cbf980 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -49,16 +49,17 @@ jobs: - typescript - webpack-build - webpack-build-server + - basic-crud-application/angular-client steps: - name: Checkout repository uses: actions/checkout@v3 - + - name: Use Node.js 20 uses: actions/setup-node@v3 with: node-version: 20 - + - name: Build ${{ matrix.example }} run: | cd examples/${{ matrix.example }} diff --git a/examples/basic-crud-application/angular-client/.browserslistrc b/examples/basic-crud-application/angular-client/.browserslistrc deleted file mode 100644 index 427441dc93..0000000000 --- a/examples/basic-crud-application/angular-client/.browserslistrc +++ /dev/null @@ -1,17 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. diff --git a/examples/basic-crud-application/angular-client/.gitignore b/examples/basic-crud-application/angular-client/.gitignore index 86d943a9b2..0711527ef9 100644 --- a/examples/basic-crud-application/angular-client/.gitignore +++ b/examples/basic-crud-application/angular-client/.gitignore @@ -1,21 +1,18 @@ # See http://help.github.com/ignore-files/ for more about ignoring files. -# compiled output +# Compiled output /dist /tmp /out-tsc -# Only exists if Bazel was run /bazel-out -# dependencies +# Node /node_modules - -# profiling files -chrome-profiler-events*.json -speed-measure-plugin*.json +npm-debug.log +yarn-error.log # IDEs and editors -/.idea +.idea/ .project .classpath .c9/ @@ -23,7 +20,7 @@ speed-measure-plugin*.json .settings/ *.sublime-workspace -# IDE - VSCode +# Visual Studio Code .vscode/* !.vscode/settings.json !.vscode/tasks.json @@ -31,16 +28,15 @@ speed-measure-plugin*.json !.vscode/extensions.json .history/* -# misc -/.sass-cache +# Miscellaneous +/.angular/cache +.sass-cache/ /connect.lock /coverage /libpeerconnection.log -npm-debug.log -yarn-error.log testem.log /typings -# System Files +# System files .DS_Store Thumbs.db diff --git a/examples/basic-crud-application/angular-client/README.md b/examples/basic-crud-application/angular-client/README.md index 672257d34e..58266c93f7 100644 --- a/examples/basic-crud-application/angular-client/README.md +++ b/examples/basic-crud-application/angular-client/README.md @@ -1,14 +1,10 @@ -# Angular TodoMVC + Socket.IO +# AngularClient -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.4. - -Inspired from the [TodoMVC](http://todomvc.com/) [angular example](https://github.com/tastejs/todomvc/tree/master/examples/angular2). - -![demo](assets/demo.gif) +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.2. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. ## Code scaffolding @@ -16,7 +12,7 @@ Run `ng generate component component-name` to generate a new component. You can ## Build -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. ## Running unit tests @@ -24,7 +20,7 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github. ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). +Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. ## Further help diff --git a/examples/basic-crud-application/angular-client/angular.json b/examples/basic-crud-application/angular-client/angular.json index 1f7b865cc8..d89148bae5 100644 --- a/examples/basic-crud-application/angular-client/angular.json +++ b/examples/basic-crud-application/angular-client/angular.json @@ -3,26 +3,23 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "angular-todomvc": { + "angular-client": { "projectType": "application", - "schematics": { - "@schematics/angular:application": { - "strict": true - } - }, + "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-devkit/build-angular:application", "options": { - "outputPath": "dist/angular-todomvc", + "outputPath": "dist/angular-client", "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", + "browser": "src/main.ts", + "polyfills": [ + "zone.js" + ], "tsConfig": "tsconfig.app.json", - "aot": true, "assets": [ "src/favicon.ico", "src/assets" @@ -34,19 +31,6 @@ }, "configurations": { "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, "budgets": [ { "type": "initial", @@ -58,34 +42,49 @@ "maximumWarning": "2kb", "maximumError": "4kb" } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true, + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.development.ts" + } ] } - } + }, + "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "angular-todomvc:build" - }, "configurations": { "production": { - "browserTarget": "angular-todomvc:build:production" + "buildTarget": "angular-client:build:production" + }, + "development": { + "buildTarget": "angular-client:build:development" } - } + }, + "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "angular-todomvc:build" + "buildTarget": "angular-client:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", + "polyfills": [ + "zone.js", + "zone.js/testing" + ], "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets" @@ -95,34 +94,8 @@ ], "scripts": [] } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json", - "e2e/tsconfig.json" - ], - "exclude": [ - "**/node_modules/**" - ] - } - }, - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "angular-todomvc:serve" - }, - "configurations": { - "production": { - "devServerTarget": "angular-todomvc:serve:production" - } - } } } } - }, - "defaultProject": "angular-todomvc" + } } diff --git a/examples/basic-crud-application/angular-client/assets/demo.gif b/examples/basic-crud-application/angular-client/assets/demo.gif deleted file mode 100644 index 1042efc741..0000000000 Binary files a/examples/basic-crud-application/angular-client/assets/demo.gif and /dev/null differ diff --git a/examples/basic-crud-application/angular-client/e2e/protractor.conf.js b/examples/basic-crud-application/angular-client/e2e/protractor.conf.js deleted file mode 100644 index 361e7f0cdf..0000000000 --- a/examples/basic-crud-application/angular-client/e2e/protractor.conf.js +++ /dev/null @@ -1,37 +0,0 @@ -// @ts-check -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/lib/config.ts - -const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); - -/** - * @type { import("protractor").Config } - */ -exports.config = { - allScriptsTimeout: 11000, - specs: [ - './src/**/*.e2e-spec.ts' - ], - capabilities: { - browserName: 'chrome' - }, - directConnect: true, - SELENIUM_PROMISE_MANAGER: false, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function() {} - }, - onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json') - }); - jasmine.getEnv().addReporter(new SpecReporter({ - spec: { - displayStacktrace: StacktraceOption.PRETTY - } - })); - } -}; \ No newline at end of file diff --git a/examples/basic-crud-application/angular-client/e2e/src/app.e2e-spec.ts b/examples/basic-crud-application/angular-client/e2e/src/app.e2e-spec.ts deleted file mode 100644 index 40cd66b3fc..0000000000 --- a/examples/basic-crud-application/angular-client/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; - -describe('workspace-project App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', async () => { - await page.navigateTo(); - expect(await page.getTitleText()).toEqual('angular-todomvc app is running!'); - }); - - afterEach(async () => { - // Assert that there are no errors emitted from the browser - const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain(jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry)); - }); -}); diff --git a/examples/basic-crud-application/angular-client/e2e/src/app.po.ts b/examples/basic-crud-application/angular-client/e2e/src/app.po.ts deleted file mode 100644 index c9c85ab9a2..0000000000 --- a/examples/basic-crud-application/angular-client/e2e/src/app.po.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { browser, by, element } from 'protractor'; - -export class AppPage { - async navigateTo(): Promise { - return browser.get(browser.baseUrl); - } - - async getTitleText(): Promise { - return element(by.css('app-root .content span')).getText(); - } -} diff --git a/examples/basic-crud-application/angular-client/e2e/tsconfig.json b/examples/basic-crud-application/angular-client/e2e/tsconfig.json deleted file mode 100644 index 0782539c04..0000000000 --- a/examples/basic-crud-application/angular-client/e2e/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "../out-tsc/e2e", - "module": "commonjs", - "target": "es2018", - "types": [ - "jasmine", - "node" - ] - } -} diff --git a/examples/basic-crud-application/angular-client/karma.conf.js b/examples/basic-crud-application/angular-client/karma.conf.js deleted file mode 100644 index 8c36c2d963..0000000000 --- a/examples/basic-crud-application/angular-client/karma.conf.js +++ /dev/null @@ -1,44 +0,0 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma') - ], - client: { - jasmine: { - // you can add configuration options for Jasmine here - // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html - // for example, you can disable the random execution with `random: false` - // or set a specific seed with `seed: 4321` - }, - clearContext: false // leave Jasmine Spec Runner output visible in browser - }, - jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces - }, - coverageReporter: { - dir: require('path').join(__dirname, './coverage/angular-todomvc'), - subdir: '.', - reporters: [ - { type: 'html' }, - { type: 'text-summary' } - ] - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - restartOnFileChange: true - }); -}; diff --git a/examples/basic-crud-application/angular-client/package.json b/examples/basic-crud-application/angular-client/package.json index 27cdf7073d..5116431a82 100644 --- a/examples/basic-crud-application/angular-client/package.json +++ b/examples/basic-crud-application/angular-client/package.json @@ -1,46 +1,40 @@ { - "name": "angular-todomvc", + "name": "angular-client", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" + "watch": "ng build --watch --configuration development", + "test": "ng test" }, "private": true, "dependencies": { - "@angular/animations": "~11.0.4", - "@angular/common": "~11.0.4", - "@angular/compiler": "~11.0.4", - "@angular/core": "~11.0.4", - "@angular/forms": "~11.0.4", - "@angular/platform-browser": "~11.0.4", - "@angular/platform-browser-dynamic": "~11.0.4", - "@angular/router": "~11.0.4", - "rxjs": "~6.6.0", - "socket.io-client": "^4.0.0", - "tslib": "^2.0.0", - "zone.js": "~0.10.2" + "@angular/animations": "^17.0.0", + "@angular/common": "^17.0.0", + "@angular/compiler": "^17.0.0", + "@angular/core": "^17.0.0", + "@angular/forms": "^17.0.0", + "@angular/platform-browser": "^17.0.0", + "@angular/platform-browser-dynamic": "^17.0.0", + "@angular/router": "^17.0.0", + "rxjs": "~7.8.0", + "socket.io-client": "^4.7.2", + "tslib": "^2.3.0", + "zone.js": "~0.14.2" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.1100.4", - "@angular/cli": "~11.0.4", - "@angular/compiler-cli": "~11.0.4", - "@types/jasmine": "~3.6.0", - "@types/node": "^12.11.1", - "codelyzer": "^6.0.0", - "jasmine-core": "~3.6.0", - "jasmine-spec-reporter": "~5.0.0", - "karma": "~5.1.0", - "karma-chrome-launcher": "~3.1.0", - "karma-coverage": "~2.0.3", - "karma-jasmine": "~4.0.0", - "karma-jasmine-html-reporter": "~1.5.0", - "protractor": "~7.0.0", - "ts-node": "~8.3.0", - "tslint": "~6.1.0", - "typescript": "~4.0.2" + "@angular-devkit/build-angular": "^17.0.2", + "@angular/cli": "^17.0.2", + "@angular/compiler-cli": "^17.0.0", + "@types/jasmine": "~5.1.0", + "@types/node": "^20.9.2", + "jasmine-core": "~5.1.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.2.2" } } diff --git a/examples/basic-crud-application/angular-client/src/app/app.component.html b/examples/basic-crud-application/angular-client/src/app/app.component.html index 644aa7089b..0bfe1080af 100644 --- a/examples/basic-crud-application/angular-client/src/app/app.component.html +++ b/examples/basic-crud-application/angular-client/src/app/app.component.html @@ -1,7 +1,8 @@

todos

- + +
diff --git a/examples/basic-crud-application/angular-client/src/app/app.component.spec.ts b/examples/basic-crud-application/angular-client/src/app/app.component.spec.ts index d2e3a2bc4d..c720208b18 100644 --- a/examples/basic-crud-application/angular-client/src/app/app.component.spec.ts +++ b/examples/basic-crud-application/angular-client/src/app/app.component.spec.ts @@ -4,9 +4,7 @@ import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], + imports: [AppComponent], }).compileComponents(); }); @@ -16,16 +14,16 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'angular-todomvc'`, () => { + it(`should have the 'angular-client' title`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; - expect(app.title).toEqual('angular-todomvc'); + expect(app.title).toEqual('angular-client'); }); it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain('angular-todomvc app is running!'); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-client'); }); }); diff --git a/examples/basic-crud-application/angular-client/src/app/app.component.ts b/examples/basic-crud-application/angular-client/src/app/app.component.ts index a5857b4d58..040ef3d76e 100644 --- a/examples/basic-crud-application/angular-client/src/app/app.component.ts +++ b/examples/basic-crud-application/angular-client/src/app/app.component.ts @@ -1,17 +1,21 @@ import { Component } from '@angular/core'; -import { TodoStore, Todo } from './store'; +import { CommonModule } from '@angular/common'; +import { RouterOutlet } from '@angular/router'; +import {type Todo, TodoStore} from "./store"; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; @Component({ selector: 'app-root', + standalone: true, + imports: [CommonModule, RouterOutlet, ReactiveFormsModule], templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrl: './app.component.css', + providers: [TodoStore] }) export class AppComponent { - todoStore: TodoStore; - newTodoText = ''; + newTodoText = new FormControl(''); - constructor(todoStore: TodoStore) { - this.todoStore = todoStore; + constructor(readonly todoStore: TodoStore) { } stopEditing(todo: Todo, editedTitle: string) { @@ -51,9 +55,9 @@ export class AppComponent { } addTodo() { - if (this.newTodoText.trim().length) { - this.todoStore.add(this.newTodoText); - this.newTodoText = ''; + if (this.newTodoText.value?.trim().length) { + this.todoStore.add(this.newTodoText.value!); + this.newTodoText.setValue(''); } } } diff --git a/examples/basic-crud-application/angular-client/src/app/app.config.ts b/examples/basic-crud-application/angular-client/src/app/app.config.ts new file mode 100644 index 0000000000..6c6ef6035f --- /dev/null +++ b/examples/basic-crud-application/angular-client/src/app/app.config.ts @@ -0,0 +1,8 @@ +import { ApplicationConfig } from '@angular/core'; +import { provideRouter } from '@angular/router'; + +import { routes } from './app.routes'; + +export const appConfig: ApplicationConfig = { + providers: [provideRouter(routes)] +}; diff --git a/examples/basic-crud-application/angular-client/src/app/app.module.ts b/examples/basic-crud-application/angular-client/src/app/app.module.ts deleted file mode 100644 index c4395c0b59..0000000000 --- a/examples/basic-crud-application/angular-client/src/app/app.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppComponent } from './app.component'; -import { TodoStore } from './store'; -import { FormsModule } from "@angular/forms"; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - FormsModule - ], - providers: [TodoStore], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/examples/basic-crud-application/angular-client/src/app/app.routes.ts b/examples/basic-crud-application/angular-client/src/app/app.routes.ts new file mode 100644 index 0000000000..dc39edb5f2 --- /dev/null +++ b/examples/basic-crud-application/angular-client/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = []; diff --git a/examples/basic-crud-application/angular-client/src/app/store.ts b/examples/basic-crud-application/angular-client/src/app/store.ts index 23066e9077..3ec0f8307d 100644 --- a/examples/basic-crud-application/angular-client/src/app/store.ts +++ b/examples/basic-crud-application/angular-client/src/app/store.ts @@ -1,6 +1,7 @@ import { io, Socket } from "socket.io-client"; -import { ClientEvents, ServerEvents } from "../../../server/lib/events"; +import { ClientEvents, ServerEvents } from "../../../common/events"; import { environment } from '../environments/environment'; +import {Injectable} from "@angular/core"; export interface Todo { id: string, @@ -18,6 +19,7 @@ const mapTodo = (todo: any) => { } } +@Injectable() export class TodoStore { public todos: Array = []; private socket: Socket; diff --git a/examples/basic-crud-application/angular-client/src/environments/environment.development.ts b/examples/basic-crud-application/angular-client/src/environments/environment.development.ts new file mode 100644 index 0000000000..5b2738bef1 --- /dev/null +++ b/examples/basic-crud-application/angular-client/src/environments/environment.development.ts @@ -0,0 +1,3 @@ +export const environment = { + serverUrl: "http://localhost:3000" +}; diff --git a/examples/basic-crud-application/angular-client/src/environments/environment.prod.ts b/examples/basic-crud-application/angular-client/src/environments/environment.prod.ts deleted file mode 100644 index 825148257c..0000000000 --- a/examples/basic-crud-application/angular-client/src/environments/environment.prod.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const environment = { - production: true, - serverUrl: "https://my-custom-domain.com" -}; diff --git a/examples/basic-crud-application/angular-client/src/environments/environment.ts b/examples/basic-crud-application/angular-client/src/environments/environment.ts index 56d9890466..16fbd668fc 100644 --- a/examples/basic-crud-application/angular-client/src/environments/environment.ts +++ b/examples/basic-crud-application/angular-client/src/environments/environment.ts @@ -1,17 +1,3 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - export const environment = { - production: false, - serverUrl: "http://localhost:3000" + serverUrl: "https://my-custom-domain.com" }; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/examples/basic-crud-application/angular-client/src/favicon.ico b/examples/basic-crud-application/angular-client/src/favicon.ico index 997406ad22..57614f9c96 100644 Binary files a/examples/basic-crud-application/angular-client/src/favicon.ico and b/examples/basic-crud-application/angular-client/src/favicon.ico differ diff --git a/examples/basic-crud-application/angular-client/src/index.html b/examples/basic-crud-application/angular-client/src/index.html index 6b9657c4fd..ed43911468 100644 --- a/examples/basic-crud-application/angular-client/src/index.html +++ b/examples/basic-crud-application/angular-client/src/index.html @@ -2,7 +2,7 @@ - Angular Todo MVC + AngularClient diff --git a/examples/basic-crud-application/angular-client/src/main.ts b/examples/basic-crud-application/angular-client/src/main.ts index c7b673cf44..35b00f3463 100644 --- a/examples/basic-crud-application/angular-client/src/main.ts +++ b/examples/basic-crud-application/angular-client/src/main.ts @@ -1,12 +1,6 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err)); diff --git a/examples/basic-crud-application/angular-client/src/polyfills.ts b/examples/basic-crud-application/angular-client/src/polyfills.ts deleted file mode 100644 index 9b8f300ef6..0000000000 --- a/examples/basic-crud-application/angular-client/src/polyfills.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/examples/basic-crud-application/angular-client/src/test.ts b/examples/basic-crud-application/angular-client/src/test.ts deleted file mode 100644 index 50193eb0f2..0000000000 --- a/examples/basic-crud-application/angular-client/src/test.ts +++ /dev/null @@ -1,25 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: { - context(path: string, deep?: boolean, filter?: RegExp): { - keys(): string[]; - (id: string): T; - }; -}; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() -); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/examples/basic-crud-application/angular-client/tsconfig.app.json b/examples/basic-crud-application/angular-client/tsconfig.app.json index 82d91dc4a4..374cc9d294 100644 --- a/examples/basic-crud-application/angular-client/tsconfig.app.json +++ b/examples/basic-crud-application/angular-client/tsconfig.app.json @@ -6,8 +6,7 @@ "types": [] }, "files": [ - "src/main.ts", - "src/polyfills.ts" + "src/main.ts" ], "include": [ "src/**/*.d.ts" diff --git a/examples/basic-crud-application/angular-client/tsconfig.json b/examples/basic-crud-application/angular-client/tsconfig.json index d3c1011aa5..678336b9e1 100644 --- a/examples/basic-crud-application/angular-client/tsconfig.json +++ b/examples/basic-crud-application/angular-client/tsconfig.json @@ -2,26 +2,29 @@ { "compileOnSave": false, "compilerOptions": { - "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, + "esModuleInterop": true, "sourceMap": true, "declaration": false, - "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, - "target": "es2015", - "module": "es2020", + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, "lib": [ - "es2018", + "ES2022", "dom" ] }, "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true diff --git a/examples/basic-crud-application/angular-client/tsconfig.spec.json b/examples/basic-crud-application/angular-client/tsconfig.spec.json index 092345b02e..be7e9da76f 100644 --- a/examples/basic-crud-application/angular-client/tsconfig.spec.json +++ b/examples/basic-crud-application/angular-client/tsconfig.spec.json @@ -7,10 +7,6 @@ "jasmine" ] }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], "include": [ "src/**/*.spec.ts", "src/**/*.d.ts" diff --git a/examples/basic-crud-application/angular-client/tslint.json b/examples/basic-crud-application/angular-client/tslint.json deleted file mode 100644 index 277c8eba02..0000000000 --- a/examples/basic-crud-application/angular-client/tslint.json +++ /dev/null @@ -1,152 +0,0 @@ -{ - "extends": "tslint:recommended", - "rulesDirectory": [ - "codelyzer" - ], - "rules": { - "align": { - "options": [ - "parameters", - "statements" - ] - }, - "array-type": false, - "arrow-return-shorthand": true, - "curly": true, - "deprecation": { - "severity": "warning" - }, - "eofline": true, - "import-blacklist": [ - true, - "rxjs/Rx" - ], - "import-spacing": true, - "indent": { - "options": [ - "spaces" - ] - }, - "max-classes-per-file": false, - "max-line-length": [ - true, - 140 - ], - "member-ordering": [ - true, - { - "order": [ - "static-field", - "instance-field", - "static-method", - "instance-method" - ] - } - ], - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-empty": false, - "no-inferrable-types": [ - true, - "ignore-params" - ], - "no-non-null-assertion": true, - "no-redundant-jsdoc": true, - "no-switch-case-fall-through": true, - "no-var-requires": false, - "object-literal-key-quotes": [ - true, - "as-needed" - ], - "quotemark": [ - true, - "single" - ], - "semicolon": { - "options": [ - "always" - ] - }, - "space-before-function-paren": { - "options": { - "anonymous": "never", - "asyncArrow": "always", - "constructor": "never", - "method": "never", - "named": "never" - } - }, - "typedef": [ - true, - "call-signature" - ], - "typedef-whitespace": { - "options": [ - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - }, - { - "call-signature": "onespace", - "index-signature": "onespace", - "parameter": "onespace", - "property-declaration": "onespace", - "variable-declaration": "onespace" - } - ] - }, - "variable-name": { - "options": [ - "ban-keywords", - "check-format", - "allow-pascal-case" - ] - }, - "whitespace": { - "options": [ - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type", - "check-typecast" - ] - }, - "component-class-suffix": true, - "contextual-lifecycle": true, - "directive-class-suffix": true, - "no-conflicting-lifecycle": true, - "no-host-metadata-property": true, - "no-input-rename": true, - "no-inputs-metadata-property": true, - "no-output-native": true, - "no-output-on-prefix": true, - "no-output-rename": true, - "no-outputs-metadata-property": true, - "template-banana-in-box": true, - "template-no-negated-async": true, - "use-lifecycle-interface": true, - "use-pipe-transform-interface": true, - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ] - } -} diff --git a/examples/basic-crud-application/server/lib/events.ts b/examples/basic-crud-application/common/events.ts similarity index 78% rename from examples/basic-crud-application/server/lib/events.ts rename to examples/basic-crud-application/common/events.ts index 085c1cb5da..2fb6d91ec5 100644 --- a/examples/basic-crud-application/server/lib/events.ts +++ b/examples/basic-crud-application/common/events.ts @@ -1,9 +1,18 @@ -import { Todo, TodoID } from "./todo-management/todo.repository"; -import { ValidationErrorItem } from "joi"; +export type TodoID = string; + +export interface Todo { + id: TodoID; + completed: boolean; + title: string; +} interface Error { error: string; - errorDetails?: ValidationErrorItem[]; + errorDetails?: { + message: string; + path: Array; + type: string; + }[]; } interface Success { diff --git a/examples/basic-crud-application/server/lib/app.ts b/examples/basic-crud-application/server/lib/app.ts index a3937122bf..3507f7af9b 100644 --- a/examples/basic-crud-application/server/lib/app.ts +++ b/examples/basic-crud-application/server/lib/app.ts @@ -1,6 +1,6 @@ import { Server as HttpServer } from "http"; import { Server, ServerOptions } from "socket.io"; -import { ClientEvents, ServerEvents } from "./events"; +import { ClientEvents, ServerEvents } from "../../common/events"; import { TodoRepository } from "./todo-management/todo.repository"; import createTodoHandlers from "./todo-management/todo.handlers"; diff --git a/examples/basic-crud-application/server/lib/todo-management/todo.handlers.ts b/examples/basic-crud-application/server/lib/todo-management/todo.handlers.ts index 711c5c11cd..d875ff679b 100644 --- a/examples/basic-crud-application/server/lib/todo-management/todo.handlers.ts +++ b/examples/basic-crud-application/server/lib/todo-management/todo.handlers.ts @@ -2,8 +2,13 @@ import { Errors, mapErrorDetails, sanitizeErrorMessage } from "../util"; import { v4 as uuid } from "uuid"; import { Components } from "../app"; import Joi = require("joi"); -import { Todo, TodoID } from "./todo.repository"; -import { ClientEvents, Response, ServerEvents } from "../events"; +import { + Todo, + TodoID, + ClientEvents, + Response, + ServerEvents, +} from "../../../common/events"; import { Socket } from "socket.io"; const idSchema = Joi.string().guid({ @@ -19,8 +24,7 @@ const todoSchema = Joi.object({ completed: Joi.boolean().required(), }); -export default function (components: Components) { - const { todoRepository } = components; +export default function ({ todoRepository }: Components) { return { createTodo: async function ( payload: Omit, diff --git a/examples/basic-crud-application/server/lib/todo-management/todo.repository.ts b/examples/basic-crud-application/server/lib/todo-management/todo.repository.ts index c3e3e83e7f..02a376ff6c 100644 --- a/examples/basic-crud-application/server/lib/todo-management/todo.repository.ts +++ b/examples/basic-crud-application/server/lib/todo-management/todo.repository.ts @@ -1,4 +1,5 @@ import { Errors } from "../util"; +import { Todo, TodoID } from "../../../common/events"; abstract class CrudRepository { abstract findAll(): Promise; @@ -7,14 +8,6 @@ abstract class CrudRepository { abstract deleteById(id: ID): Promise; } -export type TodoID = string; - -export interface Todo { - id: TodoID; - completed: boolean; - title: string; -} - export abstract class TodoRepository extends CrudRepository {} export class InMemoryTodoRepository extends TodoRepository {