msl note

Intro This time I added TypeOrm into the Nest.js project. [Angular 10 + NgRx + Nest.js] Create project Use TypeOrm Install To use TypeOrm I installed some packages.  [PostgreSQL] Play with TypeORM 1   And to integrate the Nest.js project, I add an additional package. npm install --save @nestjs/typeorm typeorm pg Database | NestJS - A progressive Node.js framework Configuration Last time I used "ormconfig.json" for TypeOrm configuration. In Nest.js projects, I also could write them in "app.module.ts". server/app.module.ts import { Module } from '@nestjs/common'; import { AngularUniversalModule } from '@nestjs/ng-universal'; import { TypeOrmModule } from '@nestjs/typeorm'; import { join } from 'path'; import { Workflow } from './entities/workflow.entity'; @Module({ imports: [ AngularUniversalModule.forRoot({ viewsPath: join(process.cwd(), 'dist/browser'), bundle: require('../serve...

Intro This time, I added server-side. I choosed Nest.js because I love TypeScript and I had been interested in using TypeScript in server-side programming. Environments Angular ver.10.0.2 @ngrx/store ver.9.2.0 @ngrx/effects ver.9.2.0 @nestjs/ng-universal ver.2.0.1 Couldn't add @ngrx/store into the Angular 10 project First, I created an Angular project and tried adding @ngrx/store into it. And I got an error. Installing packages for tooling via npm. Installed packages for tooling via npm. The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support. According to the issue below, I should add "@latest". npx ng add @ngrx/store@latest Because if I didn't add it, the @ngrx/store version was too low.    cannot use ng add to install ngrx store · Issue #2604 · ngrx/platform · GitHub Though I didn't know I should add "@latest" into ...

Intro This time, I tried Effects(@ngrx/effects). [Angular] Try NgRx 1   Effects wasn't for side-effects. It was for interaction with external resources such as network requests. And it could fire actions like "store.dispatch" to Reducers.  NgRx - @ngrx/effects    I thought it worked like this. Install npx ng add @ngrx/effects Environments Angular: 10.0.2 @ngrx/store: 9.2.0 @ngrx/effects: 9.2.0 Add services In this sample, I added a service to check the game had been finished. And it didn't send and receive network request. check-game-finished.ts import { SquareValue } from './board/square/square-value'; import { GameResult } from './game-result'; type CheckTarget = { index: number, match: readonly CheckTarget[], unmatch: readonly CheckTarget[] }; const emptyTarget = { match: [], unmatch: [] }; const checkTargets: CheckTarget = { index: 0, match: [{ index: 1, match: [{ index:2,...

Intro In this time, I tried NgRx. NgRx - @NGRX/STORE   It was for managing states like Redux.  [TypeScript] Try React + Redux Environments Angular: 9.1.11 NgRx: 9.2.0 Install npx ng add @ngrx/store Base project First, I created a sample project what changed states without NgRx. app.component.html <app-board></app-board> board.component.html <div class="board"> <app-square *ngFor="let s of state.squares; let i = index" [props]="s" (onClick)="updateSquare(i)"></app-square> </div> board.component.ts import { Component, OnInit } from '@angular/core'; import { BoardState } from './board-state'; @Component({ selector: 'app-board', templateUrl: './board.component.html', styleUrls: ['./board.component.css'] }) export class BoardComponent implements OnInit { public state: BoardState; constructor() { this.state = this.initialState(); ...