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

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’);

this.route.params.subscribe(rp=> {
this.idBank = rp.id;
}
);

Seems little to do, but I have had problems with changing the router-outlet – figuring where to put it. The creation of dashboard component and the routes

const routes: Routes = [
{ path: ”, redirectTo: ‘/dashboard’, pathMatch: ‘full’ },
{ path: ‘dashboard’, component: DashboardComponent },
{path:’bank/:id’,component:BankComponent}
]

were enough trouble.

Infovalutar

And one hour passes...
(This is the result of 1 hour per day auto-challenge as a full cycle developer for an exchange rates application)
( You can see the sources at https://github.com/ignatandrei/InfoValutar/ )

Nr	Post
1	Start
2	Reading NBR from internet
3	Source control and build
4	Badge and test
5	CI and action
6	Artifacts and dotnet try
7	Docker with .NET Try
8	ECB
9	Intermezzo - Various implementations for programmers
10	Intermezzo - similar code - options
11	Plugin implementation
12	GUI for console
13	WebAPI
14	Plugin in .NET Core 3
15	Build and Versioning
16	Add swagger
17	Docker - first part
18	Docker - second part
19	Docker - build Azure
20	Pipeline send to Docker Hub
21	Play with Docker - online
22	Run VSCode and Docker
23	Deploy Azure
24	VSCode see tests and powershell
25	Code Coverage
26	Database in Azure
27	Sql In Memory or Azure
28	Azure ConString, RSS
29	Middleware for backward compatibility
30	Identical Tables in EFCore
31	Multiple Data in EFCore
32	Dot net try again
33	Start Azure Function
34	Azure function - deploy
35	Solving my problems
36	IAsyncEnumerable transformed to IEnumerable and making Azure Functions works
37	Azure functions - final
38	Review of 37 hours
39	Last Commit in AzureDevOps
40	Create Angular WebSite
41	Add static Angular to WebAPI .NET Core
42	Docker for Angular
43	Angular and CORS
44	SSL , VSCode, Docker
45	Routing in Angular
46	RxJS for Routing
47	RxJs Unsubscribe

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 to run

ng serve –host 0.0.0.0 –poll 200

but it does not show modifications of files changing.

The problem is that not show the files changing generated inside. Time to re-build the docker container for angular

docker container prune -f
docker images “vs*”
docker image rm <id of the prev image>

No modification. The problem was: the BankService was not referenced yet! If I refeerence to the BankComponent, the poll works!

Now let’s see if the Angular Web can access .NET Core WebAPI – no. I forgot to add CORS:

public void ConfigureServices(IServiceCollection services)
{
     services.AddCors(options =>
     {
         options.AddPolicy(“AllowedAll”,
         builder =>
         {
             builder
                 .AllowAnyHeader()
                 .AllowAnyOrigin()
                 .AllowAnyMethod();
         });

    });

// code
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{

    if (env.IsDevelopment())
     {
         app.UseDeveloperExceptionPage();
     }

    app.UseCors(“AllowedAll”);

and now it works – I can see in Angular Web App the banks.

The modifications are in

https://github.com/ignatandrei/InfoValutar/commit/2106328935b972a4411f5412ba3fc810a46399b8

January 14, 2020
No Comments
Andrei Ignat
.NET Core, Angular, Docker, exchange rates

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 result

in folder .devcontainer : A DockerFileAng file that have a new line, RUN npm install -g @angular/cli
in folder .devcontainer : A devcontainer.json file that have “appPort”: [4200], “postCreateCommand”: “npm i && echo ‘you should run npm start'”,
Modified package.json, “start”: “ng serve –host 0.0.0.0”, – in order to publish the port.

Now I can open from VSCode with Remote Extension – and use there without installing on my PC anything but VSCode + Docker + Remote Extension

You can find the sources at https://github.com/ignatandrei/InfoValutar/commit/2aba3e9ed667d03728916a784a969e28b1026ec6

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 Angular application and add the index html generated by Angular to the wwwroot site

I create a powershell ( easy for me , because you can install dotnet tool powershell )

echo “starting build angular”
cd InfovalutarWebAng
npm i
ng build –prod –build-optimizer
cd ..

$source= “InfovalutarWebAng/dist/InfovalutarWebAng/”
$dest= “InfoValutarWebAPI/wwwroot/”
echo “delete files”
Get-ChildItem -Path $dest -Include *.* -File -Recurse | foreach { $_.Delete()}
echo “copy files”
Get-ChildItem -Path $source | Copy-Item -Destination $dest

and put in Azure Devops pipelines

– powershell: |
       cd InfoValutar
       .\copyAng.ps1
   displayName: copy angular site to web api

Now commit in GitHub (https://github.com/ignatandrei/InfoValutar/comAmit/5208036a4cb1da719692966880236dc33b1b2e74 )and waiting to see if it works

The error is : “The term ‘ng’ is not recognized as the name of a cmdlet, function, script file, or

The term ‘ng’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the

spelling of the name, or if a path was included, verify that the path is correct and try again.

“

Adding

npm i -g @angular/cli

It works!

January 9, 2020
No Comments
Andrei Ignat
.NET Core, Angular, azure devops, exchange rates

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 run in a container for the people that do not have Angular installed – or do not want to.

Remember how it was for .NET Core , that I need just an Internet Connection , Docker and VSCode ? http://msprogrammer.serviciipeweb.ro/2019/12/04/debug-application-under-vscode-and-dockerpart-22/

Now it does not work – cannot load application because some bug in .NET Core . Why ? I have been going to .NET Core 3.1 and not updated the docker file…

ARG DOTNETCORE_VERSION=3.1

Now it loads – however, saying that the methid has not an implementation. Solving later.

Now going to

https://github.com/microsoft/vscode-dev-containers

to find same for Angular…

After some attempts, I have this files into .devcontainer

devcontainer.json

// For format details, see https://aka.ms/vscode-remote/devcontainer.json or the definition README at
// https://github.com/microsoft/vscode-dev-containers/tree/master/containers/alpine-3.10-git
{
     “name”: “Angular”,
     “dockerFile”: “DockerfileAng”,
     // Uncomment the next line to have VS Code connect as an existing non-root user in the container.
     // On Linux, by default, the container user’s UID/GID will be updated to match your local user. See
     // https://aka.ms/vscode-remote/containers/non-root for details on adding a non-root user if none exist.
     // “remoteUser”: “vscode”,

    // Uncomment the next line if you will use a ptrace-based debugger like C++, Go, and Rust
     // “runArgs”: [ “–cap-add=SYS_PTRACE”, “–security-opt”, “seccomp=unconfined” ],

     // Use ‘settings’ to set *default* container specific settings.json values on container create.
     // You can edit these settings after create using File > Preferences > Settings > Remote.
     “settings”: {
         // This dev container does include /bin/bash if you prefer to use it instead of ash.
         “terminal.integrated.shell.linux”: “/bin/ash”
     },

    // Use ‘appPort’ to create a container with published ports. If the port isn’t working, be sure
     // your server accepts connections from all interfaces (0.0.0.0 or ‘*’), not just localhost.
     // “appPort”: [],

    // Uncomment the next line to run commands after the container is created.
     // “postCreateCommand”: “uname -a”,

    // Add the IDs of extensions you want installed when the container is created in the array
     // below. Note that some extensions may not work in Alpine Linux due to glibc dependencies
     // in native code inside the extension. See https://aka.ms/vscode-remote/linux for details.
     “extensions”: [],
     “postCreateCommand”: “cd InfovalutarWebAng && npm i”,
     “overrideCommand”:true,
     “shutdownAction”: “stopContainer”
}

and DockerFileAng

#————————————————————————————————————-
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
#————————————————————————————————————-
FROM alpine:3.10

# This Dockerfile adds a non-root user with sudo access. Use the “remoteUser”
# property in devcontainer.json to use it. On Linux, the container user’s GID/UIDs
# will be updated to match your local UID/GID (when using the dockerFile property).
# See https://aka.ms/vscode-remote/containers/non-root-user for details.
ARG USERNAME=vscode
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Install git, bash, dependencies, and add a non-root user
RUN apk add –no-cache git bash libgcc libstdc++ \
     #
     # Create a non-root user to use if preferred – see https://aka.ms/vscode-remote/containers/non-root-user.
     && addgroup -g $USER_GID $USERNAME \
     && adduser -S -s /bin/bash -u $USER_UID -G $USERNAME $USERNAME \
     # [Optional] Add sudo support for the non-root user
     && apk add –no-cache sudo \
     && echo $USERNAME ALL=$root$ NOPASSWD:ALL > /etc/sudoers.d/$USERNAME\
     && chmod 0440 /etc/sudoers.d/$USERNAME

RUN apk add –update npm
RUN npm install -g @angular/cli

Now I can run in remote container and ng serve from remote container ( do not forget to be in Angular folder and forward port from VSCode !)

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

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  transform(text: string, search): string {
     // window.alert(text );
     //console.log(search );
    if (search && text) {
      let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
      pattern = pattern.split(' ').filter((t) => {
        return t.length > 0;
      }).join('|');
      const regex = new RegExp(pattern, 'gi');

      return text.replace(regex, (match) => `<b><i><strong>${match}</strong></i></b>`);
    } else {
      return text;
    }
  }
}

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’; )
<span [innerHTML]=”name | highlight: selectedText”></span>

Things to improve:

1. The regex should be a parameter ( with the default value seen below)

2. How to select the word should be a parameter also ( here is <b><i> )

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

Bingo

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)

Nr	Link
1	Create meeting
2	Create Tests
3	Finalize Create meeting
4	Sharing meeting
5	Keep Score
6	Add obsolete
7	Finalizing obsolete
8	End meeting
9	Dockerize tests
10	Azure CI tests
11	Yarn workspaces
12	CLI
13	Intermezzo - CLI improvements
14	typescript compile run with node
15	NestJS ,swagger and create a meeting
16	Finalizing API
17	Intermezzo - jest vs jasmine error
18	Refactor WebAPI and test service
19	Heroku Deploy NestJs
20	Angular
21	Deploy Angular to GitHub
22	WebAPI and Web
23	Documentation
24	Documentation of the code
25	Conclusions

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 Solution: this is easy achieved by having /api prepended to the WebAPI routes)

2. The WebAPI should be configured as to build to different configurations: for our purpose, calling root ( /). For docs ( https://alexandru360.github.io/PresentationBingoCards/ ) it should call official deploy http://bingo-meeting-api.herokuapp.com/api/

Solution: read about environment https://angular.io/guide/build . I have made a new environment dockerbuild Rememeber to create a new environment.ts + a new entry in angular.json to build this configuration + an entry in package.json to build it . Then modify the service to use environment( see the modifications at https://github.com/alexandru360/PresentationBingoCards/commit/6dafb0c0b005d46bc426d128f9caf5d53e039dfa ).

3. For NestJs to serve html file , add nest-middlewares/serve-static , then add the following code in the appropiate places:

ServeStaticModule

.forRoot({

rootPath: join(__dirname, ‘..’, ‘dist’,’bingo-cards-ui’),

})],

ServeStaticMiddleware.configure(‘/test’ );

consumer.apply(ServeStaticMiddleware).forRoutes(‘/test’);

( see https://github.com/alexandru360/PresentationBingoCards/commit/6dafb0c0b005d46bc426d128f9caf5d53e039dfa )

4. In the docker compile the Angular , then copy the files into WebAPI folder, then run the WebAPI site . See https://github.com/alexandru360/PresentationBingoCards/blob/master/dockerize/docker_runwebapiweb.txt and https://github.com/alexandru360/PresentationBingoCards/blob/master/dockerize/build_RunWebApiWeb.bat

September 4, 2019
No Comments
Andrei Ignat
Angular, bingo, Docker, nestjs, typescript

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

Bingo

Nr	Link
1	Create meeting
2	Create Tests
3	Finalize Create meeting
4	Sharing meeting
5	Keep Score
6	Add obsolete
7	Finalizing obsolete
8	End meeting
9	Dockerize tests
10	Azure CI tests
11	Yarn workspaces
12	CLI
13	Intermezzo - CLI improvements
14	typescript compile run with node
15	NestJS ,swagger and create a meeting
16	Finalizing API
17	Intermezzo - jest vs jasmine error
18	Refactor WebAPI and test service
19	Heroku Deploy NestJs
20	Angular
21	Deploy Angular to GitHub
22	WebAPI and Web
23	Documentation
24	Documentation of the code
25	Conclusions

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 have the site https://alexandru360.github.io/PresentationBingoCards/ ( see username and repository changing position?) . What is there could come form different GitHub project settings – I choose to be in the docs folder.

So we need to compile the Angular Application and put the result on the docs folder on Github

If we do this on a CI on Azure, it could provide an endless loop ( push code oin GitHub, compoiling on Azure, push on GitHub folder docs, compile again…)

So it should come from Developer PC. But how to do this in a repeatable manner ? Simple – Docker!

So we build inside Docker the Angular site, copy the compile from Docker on the local system, then we manually push the modifications on Github. The system has the advantage that it can be reproducible also on Azure.

So the bat looks like this

call build_web.bat
del /S /Q ..\docs\*.*
copy dist\bingo-cards-ui\*.* ..\docs\

See https://github.com/alexandru360/PresentationBingoCards/tree/master/docs for more details about the docker files.

One small modification also: the base href from angular should be this, to accept https://alexandru360.github.io/PresentationBingoCards/ that is not rooted:

<!– <base href=”/”> –>

var isCordovaApp = !!window.cordova;

var hrefApp = “.”;

if (!isCordovaApp) {

var baseHref = window.location.href.split(‘/’);

baseHref.pop();

hrefApp = baseHref.join(‘/’) + ‘/’;

}

document.write(‘<base href=”‘ + hrefApp + ‘” />’);

</script>

create docker to deploy to docs

build_docs.bat

Bingo for meetings-build an Angular app-part 20

Bingo

Nr	Link
1	Create meeting
2	Create Tests
3	Finalize Create meeting
4	Sharing meeting
5	Keep Score
6	Add obsolete
7	Finalizing obsolete
8	End meeting
9	Dockerize tests
10	Azure CI tests
11	Yarn workspaces
12	CLI
13	Intermezzo - CLI improvements
14	typescript compile run with node
15	NestJS ,swagger and create a meeting
16	Finalizing API
17	Intermezzo - jest vs jasmine error
18	Refactor WebAPI and test service
19	Heroku Deploy NestJs
20	Angular
21	Deploy Angular to GitHub
22	WebAPI and Web
23	Documentation
24	Documentation of the code
25	Conclusions

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

export class CreateMeeting  {
  @ApiModelProperty()
  userName: string;
  @ApiModelProperty()
  meetingName: string;
}

So I ended creating an interface ICreateMeeting with the same definition

export interface ICreateMeeting{
    userName: string;
    meetingName: string;
}
export class CreateMeeting implements ICreateMeeting {
  @ApiModelProperty()
  userName: string;
  @ApiModelProperty()
  meetingName: string;
}

and using in ReactiveForms as

 const c: ICreateMeeting = {userName: '', meetingName: ''};
 this.createMeetingForm = this.formBuilder.group(c);

Also, because the interface have the same signature as the class, we can use to POST data

public SaveMeeting(create: ICreateMeeting): Observable<Meeting> {
    const url: string = this.urlApi + 'meetings';
    return this.httpAPI.post<Meeting>(url, create);
  }

2. We should call WebAPI as http if the site is http and https if the site is https. The problem is that the URL is hardCoded

private urlApi = 'http://bingo-meeting-api.herokuapp.com/';

We can have to inject the document to obtain the doc.location.protocol

  constructor(@Inject(DOCUMENT)private doc: Document,  private httpAPI: HttpClient) {
     this.protocol = doc.location.protocol;
  }

but we remember there is a better way with // , that means respecting the protocol

  private urlApi = '//bingo-meeting-api.herokuapp.com/';

3. TypeScript – ng build works, but ng build –prod –build-optimizer gives an obscure error.
The solving was to add in the tsconfig.json
“noUnusedLocals”: true,
“noUnusedParameters”: false,

and solve unused declarations.

You can find the results at https://alexandru360.github.io/PresentationBingoCards/

Intermezzo – NestJS + Jest vs Angular + Jasmine

Bingo

Nr	Link
1	Create meeting
2	Create Tests
3	Finalize Create meeting
4	Sharing meeting
5	Keep Score
6	Add obsolete
7	Finalizing obsolete
8	End meeting
9	Dockerize tests
10	Azure CI tests
11	Yarn workspaces
12	CLI
13	Intermezzo - CLI improvements
14	typescript compile run with node
15	NestJS ,swagger and create a meeting
16	Finalizing API
17	Intermezzo - jest vs jasmine error
18	Refactor WebAPI and test service
19	Heroku Deploy NestJs
20	Angular
21	Deploy Angular to GitHub
22	WebAPI and Web
23	Documentation
24	Documentation of the code
25	Conclusions

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( that comes with Jasmine by default) and Nest ( that comes with Jest) ( and us, that we have choose Jest)

There are 3 solving paths:

Convert all to Jasmine
Convert all to Jest
Eliminate the tests from the Angular , eliminate the tests from Nest and create the own library to test (we have done already this, in bingo-meeting-objects-test)

Solution 1 : means re-factor all. Not good.

I have tried the 2 , but , in spite of many tutorials on the internet, some problems have arrived.

So we have the 3 : eliminate all references to Jest and Jasmine, with the exception of bingo-meeting-objects-test

And… it worked!

Category: Angular

Infovalutar

Bingo

Bingo

Bingo

Bingo

Andrei Ignat weekly software news(mostly .NET)