A Programmer with Microsoft tools

Category: Angular

  • Displaying banks with Angular routing-part 45

    Now I want to have a separate URL for each bank,like  https://infovalutar.azurewebsites.net/bank/ECB For this I read routing in Angular,https://angular.io/tutorial/toh-pt5 . However,a small problem : when we change URL,from https://infovalutar.azurewebsites.net/bank/ECB to https://infovalutar.azurewebsites.net/bank/BNR we should re-load component – or the component be aware of changing. Reading https://kamranahmed.info/blog/2018/02/28/dealing-with-route-params-in-angular-5/ makes me change from this.idBank = this.route.snapshot.paramMap.get(‘id’); to this.route.params.subscribe(rp=> {…

  • Configure Angular Environment(local and remote) and CORS for .NET Core – part 43

    I want to be capable to run Angular with data obtained from local .NET project in development – and from remote website in production. One of the techniques is detailed here https://angular.io/guide/build Generated service : ng g s banks Now I want to see that every modification of the Bankservice will re-compile. Tried in Docker…

  • Docker environment for Angular–part 42

    Trying the alpine container from https://github.com/microsoft/vscode-dev-containers/tree/master/containers . It does not work – the error was that it cannot mount the binding folder . I figure that it was a Docker issue,https://blogs.msdn.microsoft.com/stevelasker/2016/06/14/configuring-docker-for-windows-volumes/ . Then I had a problem with “ tarball data for @angular/compiler@8.2.14 seems to be corrupted” – delete package.json for this. This is the…

  • Adding Angular to WebAPI site-part 41

    First,I want to add an index.html file – to see the result. For this,I add to the startup: public void Configure(IApplicationBuilder app,IWebHostEnvironment env)         //more code app.UseDefaultFiles(); app.UseStaticFiles(); I also add an index.html into a wwwroot folder ( also created into the root) You can see the modifications here: https://github.com/ignatandrei/InfoValutar/commit/4deb32528aee7b667f22a38c8e96899052cbfd4c Now I want to compile the…

  • Web site–Angular- part 40

    Creating  Angular app ng new InfovalutarWebAng Then customizing to add angular material ng add @angular/material and https://material.angular.io/guide/schematics#navigation-schematic  ng generate @angular/material:nav banks Delete everyhing in app component ( without <div class=”content” role=”main”> add <app-banks></app-banks> ) See if it works. If yes,move the router outlet and footer to app-banks. Now,I want to solve the CD and to…

  • Angular Pipe to match and select words in a text

    I needed two times the same pipe to match and select words in a text . I maybe put later in a npm package,but until then,here it is   You can use by performing 3 steps:  Creating a highPipe.ts and copying the code above In File : app.module.ts,at @NgModule,ad declarations  add  HighlightPipe ( also, import {HighlightPipe} from ‘./highPipe’;…

  • BingoMeetings–4 steps to run in Docker both WebAPI and Site-part 22

    Now what I want to achieve is to run the WebAPI and Angular Site in docker. For this,we should compile the Angular site and copy into the WebAPI. Also,WebAPI should serve the index.html file generated by the Angular. Those are the 4 steps: 1. Ensure that  the Angular routes and WebAPI routes should be different…

  • BingoMeetings–build and deploy Angular WebSite to GitHub–part 21

    What  we need is to deploy somewhere the WebSite application – the Angular. One version is to compile and deploy to the WebApi (http://bingo-meeting-api.herokuapp.com/api/ ),however ,I do prefer keeping separate. One simple idea is to deploy to GitHub site . For each repository,GitHub lets you have a website correlated . For example,for our project,https://github.com/alexandru360/PresentationBingoCards/,github lets you…

  • Bingo for meetings-build an Angular app-part 20

    Now it is time to create some Angular GUI. ( If you want to learn Angular,please visit https://angular.io/ ) Problems encountered: 1. The CreateMeeting did not compile (ng serve ) the CreateMeeting class ( because of the nestjs Swagger  decorators ). So I ended creating an interface ICreateMeeting with the same definition and using in…

  • Intermezzo – NestJS + Jest vs Angular + Jasmine

    We decided to add an Angular project.  As a immediate consequence,the compile ( tsc ) of the API ( bingo-cards-api) it failes with the first error being: ../node_modules/@types/jasmine/ts3.1/index.d.ts:16:1 – error TS6200: Definitions of the following identifiers conflict with those in another file: beforeAll,beforeEach,afterAll,afterEach,describe,fdescribe,xdescribe,it,fit,xit,expect,DEFAULT_TIMEOUT_INTERVAL,CustomMatcherFactory,CustomEqualityTester   Obviously,we have a conflict… And the conflict is done by Angular(…