msl note

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

Intro When I tried sending file data on last time, I had confused with "promise.then", "async/await" and "Observable". [Angular][ASP.NET Core] Upload chunked files So I wanted to distinct them, and this time, I tried to use "Observable" because HttpClient return Observable<any>. Call observables in order I sended file in these steps. Read file by FileReader Create directory for saving chunks send and saving chunks merge chunks to one file and delete chunks Each steps used the former steps result. So I could write by Promise.then like below. this.executeStep1() // return Promise<UploadResult> .then(result => this.executeStep2(result)) // return Promise<UploadResult> .then(result => this.executeStep3(result)) // return Promise<UploadResult> .catch(reason => console.log(reason)); Result I could write with pipe & flatMap. file-uploader.service.ts public upload(file: File): Observable<U...

Intro I wanted to send spreadsheets(.xlsx) to sever. But before sending, I wanted to validate the files. So I tried to read them with SheetJS. GitHub - SheetJS/sheetjs: SheetJS Community Edition -- Spreadsheet Data Toolkit xlsx · docs Spreadsheet sample Install & read data Install npm install --save xlsx Open workbook and worksheet For opening workbook, I used FileReader by Reading XLSX from FileReader.readAsArrayBuffer() · SheetJS/sheetjs Wiki · GitHub . sheet-loader.service.ts import { Injectable } from '@angular/core'; import * as xlsx from 'xlsx'; @Injectable({ providedIn: 'root' }) export class SheetLoaderService { constructor() { } public load(file: File) { const reader: FileReader = new FileReader(); reader.onload = (e: any) => { /* read workbook */ const loadResult: string = e.target.result; const workbook: xlsx.WorkBook = xlsx.read(loadResult, {type: 'binary'}); /* set first sheet as target...

Intro I wanted to send files to Web application (made by ASP.NET Core). If the file size had been small, I didn't need do any special things. But when I tried to send a large file, the error was occurred by ASP.NET Core's limitation. Though I could change the settings, but I didn't want to do that, because I hadn't known the file sizes what would been actually using. So I splitted the data into chunks first, and sent them. After receiving all chunks, I merged them into one file. There might be some libraries or APIs (ex. Stream API) what did them automatically, but I couldn't find them. What I did [ASP.NET Core] Make CORS enabled [Angular] Split a large file into chunks [Angular][ASP.NET Core] Send and receive data as form data [ASP.NET Core] Merge chunks into one file [ASP.NET Core] Make CORS enabled Because the client side application(Angular) and the server side application(ASP.NET Core) had been separated, I had to make CORS(Cross-Origin Requests) ...

Create pages with Angular Create pages with Angular 1 Create pages with Angular 2 Create pages with Angular 3 What I did getting/setting data for select tag transfer data between parent component and child components getting/setting data for select tag I got list items from service and added options to selectbox. favorite.ts export interface Favorite { displayValue: string; favoriteId: number; } favorite.service.ts import {Injectable} from '@angular/core'; import {Favorite} from './favorite'; @Injectable({ providedIn: 'root' }) export class FavoriteService { public static favorites: Array<Favorite> = [ { displayValue: '☆', favoriteId: 1}, { displayValue: '☆☆', favoriteId: 2}, { displayValue: '☆☆☆', favoriteId: 3}, ]; constructor() { } } product-cell.component.ts import { Component, OnInit, Input } from '@angular/core'; import {CellComponent} from '../cell.component'; import {Product...

Create pages with Angular Create pages with Angular 1 Create pages with Angular 2 Data bindings with Pikaday Last time, I didn't know how to use Two-way data bindings to the element what was set date by Pikaday. According to the document, I could separate [(ngModel)]="dateText" like below. Before &ltinput type="text" id="datepicker" [(ngModel)]="dateText"> After &ltinput type="text" id="datepicker" [value]="dateText" (input)="dateText=$event.target.value" > And because when Pikaday set text, the input event wasn't fired, thus I got nothing. So I changed the event. &ltinput type="text" id="datepicker" [value]="dateText" (change) ="dateText=$event.target.value"> Template Syntax - Angular Background color for IE11 When I had set background-color like "background-color:#000000AA", the color wasn't shown ...