Wednesday, January 24, 2018

Introduction to Angular 4 and TypeScript - Structure of Angular Projects and Webpack


In this article, you are going to learn about the structure of Angular project and Webpack.
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
This tutorial on angular 4 project directory structure and webpack. Before start working with Angular project we should know about the structure of the project and where are different functional files resides in the directory structure. Along this what compile these project file in background to reflect changes in browser in real time.
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
Project directory structure
According to the documentation, all our source files are under a folder and app lives in the src folder. All Angular components, templates, styles, images, and anything else your app needs go here. Any files outside of this folder are meant to support building your app. 
Under that folder is an app folder that contains the source files specific for our application. For each major feature in the application we create subfolders under the app folder.
File
Purpose
app/app.component.{ts,html,css,spec.ts}
Defines the AppComponent along with an HTML template, CSS stylesheet, and a unit test. It is the root component of what will become a tree of nested components as the application evolves.
app/app.module.ts
Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare.
assets/*
A folder where you can put images and anything else to be copied wholesale when you build your application.
environments/*
This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application. The files are replaced on-the-fly when you build your app. You might use a different API endpoint for development than you do for production or maybe different analytics tokens. You might even use some mock services. Either way, the CLI has you covered.
favicon.ico
Every site wants to look good on the bookmark bar. Get started with your very own Angular icon.
index.html
The main HTML page that is served when someone visits your site. Most of the time you'll never need to edit it. The CLI automatically adds all js and cssfiles when building your app so you never need to add any <script> or <link> tags here manually.
main.ts
The main entry point for your app. Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser. You can also use the AOT compiler without changing any code by appending the--aot flag to the ng build and ng serve commands.
polyfills.ts
Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. You should be pretty safe with core-js and zone.js, but be sure to check out the Browser Support guide for more information.
styles.css
Your global styles go here. Most of the time you'll want to have local styles in your components for easier maintenance, but styles that affect all of your app need to be in a central place.
test.ts
This is the main entry point for your unit tests. It has some custom configuration that might be unfamiliar, but it's not something you'll need to edit.
tsconfig.{app|spec}.json
TypeScript compiler configuration for the Angular app (tsconfig.app.json) and for the unit tests (tsconfig.spec.json).


package.json

The other files here are configuration and setup files, often called boilerplate files. To get us going quickly, In the package.json file, we define that   what  libraries need to install to develop and run our application. This file contains a list of all the application's dependencies. The entries start with @angular are Angular system libraries.
If we use the “npm install” on the terminal for the project, then it will check all the dependencies defined in this file and install in the “node_modules” folder.

Note: “node modules” folder contains all of our libraries for application which is installed by npm. This folder is large, so we may want to exclude it when we check-in our files into a source control system.



File/Folder
Purpose
e2e/
Inside e2e/ live the end-to-end tests. They shouldn't be inside src/ because e2e tests are really a separate app that just so happens to test your main app. That's also why they have their own tsconfig.e2e.json.
node_modules/
Node.js creates this folder and puts all third party modules listed inpackage.json inside of it.
.angular-cli.json
Configuration for Angular CLI. In this file you can set several defaults and also configure what files are included when your project is built. Check out the official documentation if you want to know more.
.editorconfig
Simple configuration for your editor to make sure everyone that uses your project has the same basic configuration. Most editors support an .editorconfig file. See http://editorconfig.org for more information.
.gitignore
Git configuration to make sure autogenerated files are not commited to source control.
karma.conf.js
Unit test configuration for the Karma test runner, used when running ng test.
package.json
npm configuration listing the third party packages your project uses. You can also add your own custom scripts here.
protractor.conf.js
End-to-end test configuration for Protractor, used when running ng e2e.
README.md
Basic documentation for your project, pre-filled with CLI command information. Make sure to enhance it with project documentation so that anyone checking out the repo can build your app!
tsconfig.json
TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
tslint.json
Linting configuration for TSLint together with Codelyzer, used when running ng lint. Linting helps keep your code style consistent.
This is all about the folder structure and now we see the webpack in action.
Now we going to make changes in the application along site application is already running on “localhost:4200”.
Now open the “app.components.ts” file under the folder src\app. Change the title from ‘app’ to ‘My First Angular App’ and as you change this text it will automatically reflect in the browser.


Web view:
When we change the title and save the file, you see in the command prompt we see the “compiling”.  After completion of the compilation you will see the changes reflect in the browser.
Angular CLI user the tool “webpack” which is a build automation tool.it bundle all out stylesheets, code file and minifies them for optimization. Webpack automatically recompile our application and refreshes bundles.
It is the webpack feature “Hot Module Replacement” (HMR). When any source file modifies webpack automatically refreshes the browser to reflect the changes. Webpack injects all the bundles in the startup index.html page at runtime.
Conclusion
In this article you have seen through the project folder structure Angular project and webpack for automated compilation



Tuesday, December 5, 2017

How to include DevExpress references in ASP.NET projects using NuGet?

Introduction:

DevExpress introduced NuGet packages for some subscriptions and it been a long time that I have not yet tried rather installing full package of DevExpress controls. Now it is much easy to include references through NuGet Package Manager.

Using DevExpress NuGet packages for DevExpress Controls

The brief information about the DevExpress NuGet Packages is described on Mehual Harry’s blog post - DevExpress NuGet Packages - Now Available

An excellent step-by-step guide to setup Visual Studio for DevExpress NuGet packages available in below QA thread:
DevExpress NuGet Packages: T466415

Setup DevExpress NuGet Feed to Visual Studio

  1. In Visual Studio, select Tools | Options. Under NuGet Package Manager, locate the Package Sources item.
  2. Add new package source using a string in the following format: “https://nuget.devexpress.com/{feed-authorization-key}/api”. This feed-authorization-key is available in your DevExpress account's Download Manager and just replace the copied authorization key in the source url.

    IncludeDevExpressNuGetPackages

Using NuGet Packages in Projects

Right-click a solution and select Manage NuGet Packages for Solution and then Select the newly added package source:

Using DevExpress NuGet Packages

Select the package you want to add to your project and all linked references will be added automatically.

Intall DevExpress Packages to Projects

updated references after adding DevExpress Packages to Projects

Now time to test the project after updating references.

Note: If you face problem with editor controls then follow the documentation of ASP.NET MVC Extensions for Integration into an ASP.NET MVC Project and we are doing Manual Integration into an Existing Project.

Conclusion:

We have added DevExpress references to the projects from Using DevExpress NuGet packages and after that you will be able to configure your project to run the ASP.NET controls.

Thursday, November 16, 2017

What is Microsoft SQL Operations Studio?

Introduction

SQL Operations Studio is a free, light-weight data management tool that runs on Windows, macOS, and Linux, for managing SQL Server, Azure SQL Database, and Azure SQL Data Warehouse;


Download and Install instruction for SQL Operations Studio Public Preview available here: Download SQL Operations Studio

Below is the feature list of SQL Operations Studio:

  • Cross-Platform DB management for Windows, macOS and Linux with simple XCopy deployment
  • SQL Server Connection Management with Connection Dialog, Server Groups, and Registered Servers

    image
  • Object Explorer supporting schema browsing and contextual command execution

    image
  • T-SQL Query Editor with advanced coding features such as autosuggestions, error diagnostics, tooltips, formatting and peek definition.

    T-SQL Query Intellisense
  • Query Results Viewer with advanced data grid supporting large result sets, export to JSON\CSV\Excel, query plan and charting

    Query Results Viewer
  • Management Dashboard supporting customizable widgets with drill-through actionable insights
  • Visual Data Editor that enables direct row insertion, update and deletion into tables
  • Backup and Restore dialogs that enables advanced customization and remote file system browsing, configured tasks can be executed or scripted
  • Task History window to view current task execution status, completion results with error messages and task T-SQL scripting
  • Scripting support to generate CREATE, SELECT and DROP statements for database objects
  • Workspaces with full Git integration and Find In Files support to managing T-SQL script libraries
  • Modern light-weight shell with theming, user settings, full screen support, integrated terminal and numerous other features

T-SQL code snippets

It also provides T-SQL code snippets which generate the proper T-SQL syntax to create databases, tables, views, stored procedures, users, logins, roles, etc., and to update existing database objects. To learn more, see Create and use code snippets.

sql snippet

(T-SQL) IntelliSense

SQL Operations Studio offers a modern, keyboard-focused T-SQL coding experience like SQL Server Management Studio that makes your everyday tasks easier with built-in features, such as multiple tab windows, a rich T-SQL editor, IntelliSense, keyword completion, code snippets, code navigation, and source control integration (Git).

Connection management (server groups)

Server groups provide a way to organize and share connection information for the servers and databases you work with. For details, see Server groups.

Integrated Terminal

Use your favorite command-line tools (for example, Bash, PowerShell, sqlcmd, bcp, and ssh) in the Integrated Terminal window right within the SQL Operations Studio (preview) user interface. To learn about the integrated terminal, see Integrated terminal.

Integrated Terminal

Information from MSOS documentation: Microsoft SQL Operations Studio

Conclusion

It is a nice lightweight cross platform tool for SQL Developers and DBAs. I found it very intuitive and easy to use for managing database. Nice step by Microsoft toward OSS and cross platform development using such good Electron based tool rather SQL Server 2017 is also cross platform.

Monday, November 6, 2017

Introduction to Angular 4 and TypeScript- Setting Up the Development Environment

clip_image001
In this article, you are going to learn that how setup the development environment for 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

Before we start code with Angular, there are some prerequisites to install first. In this article we set up everything what we need to start work with Angular 4. Before we more further to learn Angular we need to make some decisions related to selection of programming language, Editor and setup our tools to get everything ready.
What Language to select for Angular?
There several languages we could use to build an Angular application. Either we can use JavaScript or TrypeScript.

JavaScript

The JavaScript language specification standard is officially called ECMAScript or ES. Most browsers don't yet support higher version ES 6 named ES 6. So, ES 6 code must first be translated to ES 5. Code developed with ES 6 must be compiled by a tool that converts that ES 5 syntax to comparable ES 5 syntax before the browser executes it. That way we as developers get the benefits of the new ES 6 productivity features and the browsers still get code they understand. Since Angular is a JavaScript library we could use any of the many compile to JavaScript languages to build our Angular application. But the most common language choices for Angular include the ES 5 version of JavaScript. ES 5 code runs in the browser today without translation so no compile step is required. If we want to take advantage of some of the new ES 6 features to improve productivity such as classes, the let statement and arrow syntax, we can write our Angular code using ES 6. We then translate our code to ES 5 before running it.

TypeScript

Another language is TypeScript. TypeScript is a superset of JavaScript and must be translated. One of the key benefits of TypeScript is its strong typing, meaning that everything has a data type. Because of this strong typing, TypeScript has great tooling including inline documentation, syntax checking, code navigation, and advanced refactoring’s so TypeScript helps us better reason about our code. The Angular team itself takes advantage of these benefits and uses TypeScript to build Angular 2. Most of the demo code in the Angular documentation at present also uses TypeScript. For these reasons, TypeScript is the language of choice for many Angular developers and we will also use this throughout entire tutorial.
TypeScript is an open source language that is a superset of JavaScript and compiles to plain JavaScript through translation. It is strongly typed so every variable, every function, and every function parameter can have a data type.
How does TypeScript determine the appropriate types when using JavaScript libraries that are not strongly typed? By using TypeScript type definition files. These files contain the definition of each type in a library. These files are named with the library name .d.ts. TypeScript implements the ES 6 class-based object orientation plus more. It implements classes, interfaces, and inheritance so if you have experience with an object-oriented programming language such as C#, C++, or Java, using TypeScript may feel very natural to you. We will learn TypeScript in detail later in this tutorial.
clip_image0014_thumb2
Dart is another option. It is a non-JavaScript-based language for building Angular applications.
We've selected TypeScript as our Angular language.

Editor or IDE for Angular
Once we've picked a language, we select an editor or IDE that fully supports development in that language. Then we set up the development environment to get started with Angular. In these there are lots of editors and IDEs offer support for TypeScript and we can check the documentation of TypeScript Editor Support, but we only get the clever Intellisense as we type if we use a supported IDE. Initially, this was only Microsoft's Visual Studio.
Some of the support TypeScript out of the box and by including a plugin. Select any one of these supported Editors or whichever suits you best, but keep in mind that working with TypeScript will be much pleasant if you select an editor that understands TypeScript.
We are going to use either Visual Studio or Visual Studio Code throughout the tutorial. It support it much better than other IDEs or Editors because Visual Studio 2017 now has ability to debug the TypeScript code as like C# code.

Setting up Development Environment
Setting up development environment for Angular require to Install npm or Node Package Manager

Install npm or Node Package Manager
First thing you need is the latest version of the Node. Visit the Node.js website and download the latest version of the Node.

clip_image0034_thumb3
It is runtime environment for executing JavaScript code outside the browser. Node provides some tools to build Angular projects.

npm or Node Package Manager is a command line utility that interacts with a repository of open source projects. Now Node Package Manager has become the package manager for JavaScript. Using npm, we can install libraries, packages, and applications along with their dependencies.

We'll need npm to install all the libraries for Angular. Then we help us to execute scripts to compile our code and launch our Angular application.
After installing Node, we can verify it by running command “node –version” on command prompt that it has been install successfully or not.
clip_image004_thumb8

With npm installed we are ready to set up our Angular application and create our first Angular application.

Conclusion
We have learnt how to setup the environment for Angular development. If we have installed tools required for development then we good go for creating our first Angular application.



Previous: IntroductionNext: Your First Angular App

Monday, October 30, 2017

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.

    clip_image001

    Now logout from portal and login again with updated credentials

    clip_image003
  2. In my case removing the entry from credential manager which cached the previous password for the TFS connection.

    clip_image005

    Find and remove entry from web or Windows credentials where you find for your TFS service. I need to remove it from Windows Credentials

    clip_image007

    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.

Monday, October 23, 2017

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.

clip_image002

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.

clip_image004

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:

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

Wednesday, October 18, 2017

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.

clip_image002

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

clip_image004

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”

clip_image005

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.

clip_image007[1]

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.

clip_image009

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.