スキップしてメイン コンテンツに移動

投稿

Install Node.js and Angular on Ubuntu

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...

Try V8 on Ubuntu

Intro Because I had wanted to know how JavaScript worked, I tried to build and use V8. I used Ubuntu19.10 what installed on Mac mini. Because its Mac OS already hadn't been updated. Install and build V8 After installing Ubuntu, I installed git, vim, Python(ver.2.7.17) for building V8. sudo apt install git vim python Most of all software for building V8, I installed after a while by following the documents. But these had been needed at the begining of building. build V8 Most of all steps had been on the documents. But because I forgot some of them, So I got some errors :P 1. clone depot_tools and add installed path. depot_tools tutorial(7) 2. make a directory for installing v8 and move to there "mkdir ~/v8" & "cd ~/v8" 3. "fetch v8" Checking out the V8 source code - v8 4. update files "git pull --rebase origin" & "gclient sync" 5. install dependencies with "./build/install-build-deps.sh" Buildi...

[Angular]Test with Azure DevOps

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...

[Angular] Error handling of HttpClient

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...

[ASP.NET Core][Angular] Integrate Angular app into ASP.NET Core app

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...

[Angular][ASP.NET Core] Sending data

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

[Angular] Sending file with Observable and showing loading screen

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...