(Solved) .Net core web api project with vscode keep giving HTTPS endpoints can only be configured using KestrelServerOptions.Listen()

Problem:

While working for Angular project with .net core web api using Json web token for angular security, we might get exception in program.cs file of Web API of project developed in .net core

public static void Main(string[] args)

{

CreateWebHostBuilder(args).Build().Run();

}

While debugging project in vscode to run web api we find following exception:

asp.net core web api System.InvalidOperationException: HTTPS endpoints can only be configured using KestrelServerOptions.Listen(). at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.AddressBinder.<BindAddressAsync>d__7.MoveNext()


Solution:

We need to disable / Commented out / remove https: from applicationUrl in launchSettings.json

"ProjectApi": {

"commandName": "Project",

"launchBrowser": true,

"launchUrl": "api/values",

//"applicationUrl": "https://localhost:5001;http://localhost:5000",

"applicationUrl": "http://localhost:5000",

"environmentVariables": {

"ASPNETCORE_ENVIRONMENT": "Development"

}

The reason from .net core 2.1 and onward this launchSettings.json is include as template as we create .net core project. However, this wasn't happening prior to .net core 2.0 and previous versions.

So updating applicationUrl in launchSettings.json under Properties folder would do the trick and web api should start working as expected

Read More

How routing works in Angular (Brief overview)

Following is brief pictorial illustration related to angular routing:

1: If Url is changed either through router link or directly changed in address bar
2: It verifies if path exist & match in rotues.ts or routing related configuration file. It also check if routes require redirect as per configuration provided in routing file.
3: Also to check if there are process guard related to activate or deactivate  guard
4: To resolve data as per routes defined.
5: Activate component and nested components
6: Display templates and complete the routing cycles, defined in those components which become activated.

Read More

Angular 2 Events/Hooks Lifecycle

Following are brief of Angular 2 and onward related events/hooks life cycle for basic illustration:

	Lifecycle Events/ Hooks	Description
1	ngOnChanges		Fires before ngOnInit & when dataBound property changes
2	ngOnInit		Fires at on component initialize and after ngOnChanges
3	ngDoCheck		Fires at every change detection cycles
4	ngAfterContentInit		Fires after inserting content [ngContent]
5	ngAfterContentChecked		Fires after every insert content check
6	ngAfterViewInit		Fires after initialize of component/nested component
7	ngAfterViewChecked		Fires after every check of component/nested component
8	ngOnDestroy		Fires before destroy of component/directive

Read More

Angular Application Execution Cycle Summary

I came across a question about what is execution cycle of angular application in summarize manner. So following illustration will help us better understanding the execution flow of angular app:

• Main.ts runs first

• Based on definition of Main.ts, it will load "app.module.ts" which actually define "AppModule"

• For "AppComponent" defined in "app.module.ts", this will load "app.component.ts"

• A custom HTML element "app-root" linked as selector in "app.component.ts"

• This "app-root" is linked to custom tag defined in "index.html"

 

Read More

Angular/Ng command to run node server for testing app

While developing angular application through VS Code or any editor of choice, the command to run Nodejs server in order to test web application/ app in browser we need to run following command:

ng serve












This will compile angular application and deploy it on local Nodejs server mostly configured at http://localhost:4200/

Whenever we make any changes to any *.ts, index.html or css file & save it, this will recompile angular application and reload it in browser.

Read More

ng command to create new component

While using Angular 7.x if we need to create new component we use following command at terminal (I am using VS Code)

ng generate component "component name"

Above command will generate new component along with its folder under app with component name. Also it will add entry to app.module.ts file under import section & under NGModule section as well.

However, if we need to create new component without create a separate folder for component (can be used as nested component) then in terminal window first I need to get into path of component where I need to create nested component and then run following command:

ng generate component "component name" --flat

If, we need to create inline style and inline template for nested/component then we have to use following command:

ng generate component "component name" --flat -inline-style -inline-template 

Or we can use short keys for above command as :

ng g c "component name" --flat -is -it

Read More

The Angular Ecosystem

There has been lots of discussion going on related to Angular and its ecosystem. With the way changes & updates going on, this ecosystem or components on which angular ecosystem being rely it has been revolutionized as well.

Following is simple info graphic representation of Angular Ecosystem, which will help in understanding and learning angular framework to implement an enterprise level application:

Read More