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(); ...

Intro This time, I tested a component of Angular.  [Angular]Test with Azure DevOps Sample Test target was here. first-page.component.html <p>first-page works!</p> <div id="product-list" *ngFor="let p of products"> <div class="product-id">ID: {{p.id}}</div> <div class="product-name">NAME: {{p.name}}</div> </div> <button id="load-button" (click)="loadProducts()"></button> <input id="input-file" type="file" (change)="fileChanged($event.target)" > <button id="save-button" (click)="saveFile()">Save</button> first-page.component.ts import { Component, OnInit } from '@angular/core'; import { FirstPageService } from './first-page.service'; import { Product } from '../products/product'; import { FileUploadService } from '../file-upload/file-upload.service'; @C...

Upgrade from 8 to 9 I have had a question. Though I often executed "npm -g update" and Angular ver.9 has already been released, but Angular version in my PC is still 8. Why? Finally I got the reason. I must install @angular/cli again. npm install -g @angular/cli It's same as updating NuGet packages. After installing, I just do "ng update @angular/cli @angular/core" on my project. Angular Update Guide set basehref Because I use IIS, base url becomes like "http://localhost:5000/sample". So when I build Angular product, I must add path to index.html like below. index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Sample</title> <base href=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href=" sample/ favicon.ico"...

What I did Install Node.js Install Angular Try default app Install Node.js Few years ago, when I had used Ubuntu, I used nodebrew to install Node.js. But now, what shall I use? Use n My search result was I should use n . But the easiest way to install n had needed npm. npm install -g n So I installed Node.js by NodeSource first. Installing Node.js via package manager | Node.js distributions/README.md at master · nodesource/distributions · GitHub curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash - sudo apt-get install -y nodejs I installed Node.js version 13.9.0. Failed npm -g install After installing Node.js, I had tried install n and failed with permission error. example@example-Macmini:~$ npm install -g n npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN checkPermissions Missing write access to /usr/lib/node_modules npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/lib/nod...

Intro I tried to manage my ASP.NET Core & Angular projects with Azure Repos. And I wrote some tests of HttpClient for Angular. I added pipelines to execute on pulling request. Prepare I created new projects. Because I had wanted to the simple projects, so I used empty template for creating ASP.NET Core project. dotnet new empty -n AspNetCoreAngularSample And I added an Angular project. cd AspNetCoreAngularSample ng new client-apps I changed csproj, Startup.cs, angular.json and etc. for using JavaScript service as same as last time . Create Azure DevOps project I added project to Azure DevOps as same name. When I had opened Repos, because there had been no projects, so I only could links for cloning or pushing the project. I added remote repository to the ASP.NET Core & Angular projects. git remote add origin https://example@dev.azure.com/example/AspNetCoreAngularSample/_git/AspNetCoreAngularSample git push -u origin --all After all, I added a local branch and check...

Intro Sometimes I got errors when I had accessed to server with HttpClient. I had wanted to know what should I do, so I tried in some situations. Returning errors sample (ASP.NET Core) Because I had wanted to get some kinds of problems, I used Identity. Startup.cs using Files; using Microsoft.AspNetCore.Builder; using Microsoft.EntityFrameworkCore; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; using Microsoft.AspNetCore.Identity; using Microsoft.AspNetCore.SpaServices.AngularCli; using Models; using UpgradeSample.Models; using UpgradeSample.Products; using UpgradeSample.Users; public class Startup { private IConfigurationRoot Configuration { get; } public Startup(IHostEnvironment env) { ... } public void ConfigureServices(IServiceCollection services) { // DB Connect services.AddDbContext<UpgradeSampleContext>(options => options.UseNpgsql(Con...

Intro I had written Angular app and ASP.NET Core app separately. But because I had had to use some internal api at my work, I tried to integrate them. Prepare Angular (CLI ver. 8.3.21) ASP.NET Core (ver. 3.1.101) Because Microsoft.AspNetCore.SpaServices of ASP.NET Core had been obsoleted and changed to Microsoft.AspNetCore.SpaServices.Extensions. So there hadn't been so much documents. [Announcement] Obsoleting Microsoft.AspNetCore.SpaServices and Microsoft.AspNetCore.NodeServices #12890 Thus, I had generated sample program of Angular template. And I had followed it to integrate apps. dotnet new angular -n AngularSample Change Angular app Because of Microsoft.AspNetCore.SpaServices.Extensions, I hadn't needed changing the Angular app. Output Path The output path hadn't been same as Angular template's one. angular.json (Angular CLI) ... "outputPath": "dist/{PROJECT-NAME}", ... angular.json (ASP.NET Core) ... "outputPath...

Intro When I had POST data from the Angular app to ASP.NET Core app, sometimes I failed even though there hadn't been any exceptions happened. Because I had wanted to know the reason, I tried something. What I did Set data to Request Payload and POST Set data to Form Data and POST Get data from ASP.NET Core Sample Codes ASP.NET Core ApiController.cs using System; using System.Collections.Generic; using System.Threading.Tasks; using Files; using Microsoft.AspNetCore.Identity; using Microsoft.AspNetCore.Mvc; using Models; using UpgradeSample.Models; using UpgradeSample.Products; namespace UpgradeSample.Controllers { public class ApiController: Controller { private readonly IProductService _productService; public ApiController(IProductService productService) { _productService = productService; } [HttpGet] [Route("/products")] public async Task<List<Product>> GetProducts() {...