How to fix error TFS connection error "You are not authorized to access …"

In this article we will know that how to fix the error when connecting a project collection in Visual Studio with Source Control Explorer open (TF30063: You are not authorized to access… project)

Scenario:
Recently, I must change my Active Directory account password due to password policy which force the user to change the password after few days. In my development environment TFS require AD credentials to connect with TFS services.

Solution:
Peoples from developer community suggested various ways to solve this issue. Few of them explained as below:

1. One probable solution is clearing the Internet explorer 9 and above cache completely. The Team Foundation Server login apparently uses Internet Explorer which can be launched from Visual Studio though and It may conflict or try to match with cached credentials. After the cache clearing, Visual Studio ask to the correct login details screen or authenticate automatically.
   
   
   
   Now logout from portal and login again with updated credentials
   
   
2. In my case removing the entry from credential manager which cached the previous password for the TFS connection.
   
   
   
   Find and remove entry from web or Windows credentials where you find for your TFS service. I need to remove it from Windows Credentials
   
   
   
   Restart Visual Studio and Then it worked again.
3. Sometimes this problem gets resolved by clearing TFS cache from below location "C:\Users\%UserName%\AppData\Local\Microsoft\Team Foundation\7.0\Cache". Just press Win+R on keyboard and paste this path. Remove the cache and reconnect TFS with valid credentials again. It works if you are using multiple logins to connect the TFS Services.

Conclusion:

We have discovered ways to solve the TFS issue. It may work one of them to someone’s problem.

NDepend enabled all features for .NET Core 2.0 Visual Studio projects..

Introduction

NDepend is a static code analyser for .NET projects. NDepend performs a range of analyses across a solution to make the projects better with code. Now day .NET Core stack is the hot stuff in the Microsoft development technologies due to cross platform development. Recently I found that NDepend also start analysing .NET Core 2.0, ASP.NET Core 2.0 and .NET Standard 2.0 Visual Studio projects from latest Version v2017.3.1.

What’s New

All NDepend favorite features now work seamlessly with any .NET Core 2.0, ASP.NET Core 2.0 and .NET Standard 2.0 Visual Studio projects.

Here is the web report for the .NET Core web application and it also includes all the previously support features for a .NET Framework project.

There are few another improvement in newer version of NDepend.

• Guide Tooltip for Beginners and these guide tooltips now explain the basics of NDepend UI panels as you can see in below image:
  
  
• There are more than 50 improvements on the default rule-set to avoid matching false positives in various situations to make results Less False Positives and it also include ASP.NET, ASP.NET Core and WPF projects.
• UI responsiveness has been improved in Visual Studio when running NDepend analysis or loading an analysis result.
• More than 30 bugs fixed and dozen improvements done in this release.

Conclusion

NDepend has made good improvement in .NET Core projects analyses. In Visual Studio 2017, Dashboard and other reports are responsive. It is nice tool to Static Analyses for .NET and its successors .NET Core also.

How to temporary fix Open Live Writer blog template adaption issue?

Introduction

Current version of Open Live Writer has issue with some blog services e.g. BlogEngine. When we configure blog then it does adapt the blog template.

It is related to issue on OpenLiveWriter adaption issue on github. Similarly, I faced this issue when first time I configure my blog in this tool. Below is the actual theme for my blog which has white background in the blog post.

When I select this newly added blog account in the Open Live Writer, I looks like this:

It has some blackish background and font color is also different than the actual blog view.

Solution

Currently, this has not fixed yet but we can revert the blog template to view the default view of the writer to write out blog post and view them property. Below are the steps to correct the problem until Open Live Writer is not able to adapt the blog templates correctly:

Press Windows + R key to open the Run dialog and open the Open Live Writer blog templates folder at location “%AppData%\OpenLiveWriter\blogtemplates”

Then Identity the folder for your blog if you have multiple blogs configured in Open Live Writer. In my case it has multiple folders for storing blog template.

Now just delete the blog template folder and when you either reload or switch back to your blog then it will show blog in default view from Open Live Writer which much better than the previous one.

Conclusion

We learn that how to switch to the default view of Open Live writer, so that we can even write post on blog easily.

Introduction to Angular 4 and TypeScript- Your First Angular App

In this article, you are going to learn that how to create and run an Angular application using Angular CLI.
TABLE OF CONTENT

• Introduction
  • What is Angular?
  • Why do we need Angular?
  • Architecture and Building Blocks of Angular Apps
• Setting Up the Development Environment
• =>Your First Angular App
• Structure of Angular Projects
• Webpack
• TypeScript Fundamentals
  • What is TypeScript?
  • Creating First TypeScript Program
  • Declaring Variables
  • Types
  • Type Assertions
  • Arrow Functions
  • Interfaces
  • Classes
  • Objects
  • Constructors
  • Access Modifiers
  • Access Modifiers in Constructor Parameters
  • Properties
  • Modules
• Angular Fundamentals
  • Creating Components
  • Generating Components Using Angular CLI
  • Templates
  • Directives
  • Services
  • Dependency Injection
  • Generating Services Using Angular CLI
• Exercise

Introduction
Angular CLI is the new approach to work with Angular. It helps to create new projects as well as deployment of the packages through command line interface(CLI). In this article we install Angular CLI using node package manager and then create a new Angular 4 project.

Creating a new Angular Project
To create a new Angular project, first you must setup your development environment and the Angular
CLI which can be configured using below command.

npm install -g @angular/cli

Now open the command prompt and go to the directory where you want to create your first Angular application. Now run below command on the command prompt.

ng new Angular4App

After ng new xxxxxx, this xxxxxx is the application name which all depend on you that what you want to name your application.

Now open current project folder in Visual Studio Code by running below command:

code .

Finally, it is the time to check if your newly created application is running or not. To run your first application switch back to command prompt and run “ng server” command within project directory. Below is the command to run the Angular server which package and load the current application on the server so that you can run it in the browser.

ng server

After running this command, you will see in the output window where you will find that Angular live development server is listening on “localhost:4200” So go to the browser and type “localhost:4200” and you will find that your application is running as seen in above image.

Along this you will see a message in last that webpack: compiled successfully. In the next article We will discuss about webpack and project structure.

Conclusion
In this article you have learned to create and run an Angular project using Angular CLI.

Previous: Setting Up the Development Environment

Next: Structure of Angular Projects

Introduction to Angular 4 and TypeScript

This tutorial led you to learn the fundamentals of Angular and TypeScript.

TABLE OF CONTENT

• =>Introduction
  • What is Angular?
  • Why do we need Angular?
  • Architecture and Building Blocks of Angular Apps
• Setting Up the Development Environment
• Your First Angular App
• Structure of Angular Projects
• Webpack
• TypeScript Fundamentals
  • What is TypeScript?
  • Creating First TypeScript Program
  • Declaring Variables
  • Types
  • Type Assertions
  • Arrow Functions
  • Interfaces
  • Classes
  • Objects
  • Constructors
  • Access Modifiers
  • Access Modifiers in Constructor Parameters
  • Properties
  • Modules
• Angular Fundamentals
  • Creating Components
  • Generating Components Using Angular CLI
  • Templates
  • Directives
  • Services
  • Dependency Injection
  • Generating Services Using Angular CLI
• Exercise

Introduction

What is Angular?
Angular is a JavaScript framework for building client-side applications using HTML, CSS, and a programming language such as JavaScript. It is an open-source front-end web application platform based on TypeScript.

Before start using something new framework; everybody has lots of questions in his mind that What is it and Where does it fit in requirement? At which place it benefits and Why to use if there are lots of JavaScript frameworks out there.

Why do we need Angular? Why to use Angular and not some other JavaScript framework?

Angular makes HTML more expressive. It powers up HTML with language related features such as local variables, for loops, and if conditions.

Angular has powerful data binding. Application can easily display fields from data model, track changes, and process updates from the user so fast. It is built for providing speed. It has faster initial loads, faster change detections, and improved rendering times than other JavaScript frameworks.

Angular encourages modularity in application by design. It led us to create Applications as a set of building blocks, making it easier to create and reuse content. There most of the application build with JavaScript/ jQuery but as far the application gets more complex it is not easy to maintain the JavaScript and jQuery code.

It requires to properly structure the application. There are some JavaScript patterns out there e.g. Revealing Module Pattern, Prototype Pattern but these are must easy to lots beginners for JavaScript.

Angular has built-in support for making communication with a backend service. This makes it easy for web applications to integrate with a back-end service. It is preloaded with set to features to get and post data or execute server-side business logic.

Easily Testable

Picture credit from..

There are most the applications build with JavaScript or jQuery. Over the years various frameworks are build and evolved to make web applications development easier. Angular makes applications with clean structure that easy to understand and easy to maintain loosely coupled code. It makes applications more testable to write automated test to test the various part of the application.

Architecture and Building Blocks of Angular Apps


In modern web application, there are at least two parts a Front-end and Back-end. The Front-end is called client, it is the part of the web browser that user sees and interacts with. It includes user interface or UI for the application. It uses HTML, CSS, JavaScript/ TypeScript, Angular to create the Front-end. Front-end contains the HTML Templates and presentation logic to display the data and responding to the user e.g. navigation, listing data.

The Back-end consist of web servers or cloud which responsible for storing the data and doing any kind of processing. Back-end may one or more databases and APIs to make the data available to the client. For a large enterprise level application, it may also implement the business logic of the application like calculating the tax, shipping on various parameters

The Front-end or Client app talks to the Backend-end to get or save the data. At Back-end we create one or multiple HTTP Services / API to make data available to the client. These HTTP Services/ APIs are endpoint that are accessible via HTTP protocol so we call them to through HTTP request to get or save the data.

If we talk about Angular Building Blocks At the heart of every Angular App, we have one or more components. Application developed with Angular is comprised of a set of components and services which facilitates operations/functionality across those angular components.

Angular component


Angular component is comprised of a template which is the HTML for the user interface fragment defining a view for the application. component encapsulates the Data, HTML mark-up and logic for a view.

Along this, a class for the code associated with the view. The class contains the data or properties for use in the view and methods, which perform actions button for the associated view e.g. responding to a button click.

Metadata

A component also has metadata, which provides additional information about the component to Angular. It is this metadata that identifies the class as an Angular component.

Modules

Every Angular application has at least one Angular module which called the application's root Angular module. As Application grows it can have any number of additional Angular modules including feature modules that consolidate the components for a specific application feature to make code maintainable. It is a container for groups of components.

For an example, in real world scenario If we go to a grocery store then it has few shelf's to maintain their products/items to sell but in a big mall we found lots of I/0 to manage different categories of the products. Similarly, to maintain different type of components we can create multiple modules to organize the components.

If we see in Training web application, there are following modules can be created to manage the application:

Each module will manage their specific group of components, sub components to break the application in smaller and maintainable to facilitate a specific area of the application.

Conclusion:
In this section we have learned about the Angular and what/why Angular. Along this we have also tried to know the basic building blocks of the Angular to develop a web application

Next: Setting Up the Development Environment