How to create Angular 8 project in Visual Studio 2019?

In my previous post I showed how to install jQuery into an Angular 8 project.

This article is related to Angular too and describes how to create Angular 8 project in Visual Studio 2019.

Create new project

Start the Visual Studio 2019 and create new project. From the project templates select the ASP.NET Core with Angular.

Project template selector in Visual Studio 2019
ASP.NET Core with Angular project template in Visual Studio 2019

In the next step, set the project name and the location:

Configure your new project
Configure new project

On the next screen uncheck the Configure for HTTPS option. For this example we don’t need it.

Additional information
Additional project information

After that the new project will be created and you will see the project structure in the Solution Explorer.

Angular project structure in the Solution Explorer
Solution Explorer

If you don’t have Node.js installed on your PC, you will get the following error during rebuilding the project.

Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE.
Error in Error List: Node.js is required to build and run this project
Error List

What is Node.js?

Node.js is an open source, multi platform (runs on Windows, Mac OS X, Linux, etc.), server side environment which executes JavaScript code outside the web browser.

If you want to know more info about what Node.js is, please visit WikiPedia.

Install Node.js

Please go to the https://nodejs.org and download the Node.js.

Close the Visual Studio before you start the installation.

Install Node.js like in the following pictures:

Node.js Setup Wizard
Node.js Setup Wizard
Node.js Setup Wizard - License Agreement
License Agreement
Node.js Setup Wizard - Destination Folder
Select the Destination Folder
Node.js Setup Wizard - Custom Setup
Select features
Node.js Setup Wizard - Additional Tools
Optionally install additional tools
Node.js Setup Wizard - Ready to install Node.js
Ready to install Node.js

After installation please restart your PC.

Run the Angular 8 project in the browser

After restart you can rebuild the project and you can run it in the browser.

Running Angular 8 project in the browser
Running Angular project

Related Article

How to use jQuery with Angular 8?


6x faster WordPress Hosting6x faster WordPress Hosting

How to use jQuery with Angular 8?

This article describes how to integrate jQuery into the Angular 8 project.

At first, you have to check if the jquery and the @types/jquery are already installed in your Angular project.

Open the package.json file:

package.json

In this case the jquery is already installed, but the @types/jquery is missing.

Run the following command(s) for the missing package(s):

npm install jquery --save
npm install @types/jquery --save

Then open the angular.json file.

In the projects -> architect -> build -> options section add the jquery.min.js file into the scripts:

"scripts": [
              "node_modules/jquery/dist/jquery.min.js"
            ] 

Then open the tsconfig.app.json file.

Add the jquery into the types section.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [ "jquery" ] // <-- add the jquery here
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

Finally, here is a small example of how to use jquery in your Angular 8 component.

...
 ngOnInit(): void {

    jQuery(document).ready(function () {

	//your code
      
    });

  }

With these few simple steps you can import jquery into Angular 8 project.

Related Article

How to create Angular 8 project in Visual Studio 2019?


6x faster WordPress Hosting6x faster WordPress Hosting

Review of the ‘Travel & Landscape Lightroom Presets’ from Presetsh

This article describes a short review of Lightroom Presets from Presetsh.

Yesterday I bought the desktop version of ‘Travel & Landscape Lightroom Presets’ from Presetsh.

The installation of these presets into Lightroom was very easy. I followed the steps on their website and in few seconds the presets was integrated into Lightroom.

Travel & Landscape Presets installed in Lightroom

This preset collection contains 30 presets which are perfect for travel and landscape photos. And really with few clicks (or only with one click πŸ™‚ ) you can have beautiful photos.

Now I show some example photos (edited with preset and original without preset).

  1. photo

– πŸ“Œ Plitvice National Park, Croatia
– Preset: Travel Sun look 3

  1. photo

– πŸ“Œ Njivice, Island Krk, Croatia
– Preset: Travel natural beauty

  1. photo

– πŸ“Œ Powder Tower, Prague, Czech Republic
– Preset: Travel tonsee

  1. photo

– πŸ“Œ Prague, Czech Republic
– Preset: Travel See the full

  1. photo

– πŸ“Œ Andechs Monastery, Andechs, Germany
– Preset: Travel HDR 1

  1. photo

– πŸ“ŒGrΓ€felfing – MΓΌnchen, Germany
– Preset: Travel Pro travel

In some cases I was very suprised what these presets are able to do with some low quality original photos.

If you like these presets, you can find them and even more on Presetsh.com
They currently have a discount code: GIFT10 for 10% discount on your first purchase.

For more photos please visit my website: creativephotos.eu or check my portfolios here: sw4.eu/creativephotos.

How to solve the HTTP Error 500.19 – Internal Server Error

This article describes why the “HTTP Error 500.19 – Internal Server Error” occures and how to solve it on the Windows Server.

Problem:

HTTP Error 500.19 – Internal Server Error
The requested page cannot be accessed becasue the related configuration data for the page is invalid.

IIS Detailed Error – 500.19

Reason:

Some of the IIS features are not installed on the computer.

Solution:

  • Go to the Server Manager
  • Click on the Server Roles
  • Under the Web Server (IIS) node check the nodes for the Application Development like in the picture:
Add Roles and Features Wizard
  • Scroll down within the Roles and check the Management Service
Select the required Roles
  • Click on the Features
  • Check the same nodes like in the picture below
  • Click on the Next button
Select the required Features
  • Click on the Install
Confirm installation selections
  • Wait to complete the installation
  • Click on the Close button
Installation progress

Finally restart the IIS:

  • Right click on the IIS main node
  • Stop the IIS
Stop the IIS
  • Right click on the IIS main node
  • Start the IIS
Start the IIS

Now the web application should work correctly.


6x faster WordPress Hosting6x faster WordPress Hosting

How to rename MS SQL Server Database in SSMS

This article describes how to rename database in Microsoft SQL Server Management Studio.

Problem:

I wanted to rename one MS SQL database in MS SQL Management Studio via the context menu.

Renaming database via the context menu

After typing the new name and pressing Enter I got the following error message:

Error message during renaming the database
TITLE: Microsoft SQL Server Management Studio
------------------------------
Unable to rename TESTDB_1. (ObjectExplorer)
------------------------------
ADDITIONAL INFORMATION:
Rename failed for Database 'TESTDB'.  (Microsoft.SqlServer.Smo)
------------------------------
An exception occurred while executing a Transact-SQL statement or batch. (Microsoft.SqlServer.ConnectionInfo)
------------------------------
The database could not be exclusively locked to perform the operation. (Microsoft SQL Server, Error: 5030)
------------------------------

Then I tried to rename with the following SQL statement:

ALTER DATABASE TESTDB
MODIFY NAME = TESTDB_1

In this case I got this error:

The database could not be exclusively locked to perform the operation.

Solution:

After some search on the Internet I found information, that I got this error, because the database is in multi-user mode and has some open connection.

Here is the solution which worked for me:

  1. At first need to change the database to single-user mode:

    ALTER DATABASE TESTDB
    SET SINGLE_USER WITH ROLLBACK IMMEDIATE
    

  2. Then try to rename the database:

    ALTER DATABASE TESTDB
    MODIFY NAME = TESTDB_1
    

  3. Finally, set back the database to multi-user mode:

    ALTER DATABASE TESTDB_1
    SET MULTI_USER WITH ROLLBACK IMMEDIATE
    


6x faster WordPress Hosting6x faster WordPress Hosting

The Distributed Transaction doesn’t working

Problem:

System.Runtime.InteropServices.COMException (0x8004D00A): New transaction cannot enlist in the specified transaction coordinator.

Solution:

This error occurs when distributed transactions are not allowed over network.

By modifying the MSDTC security settings, you control how MSDTC communicates with remote computers over the network.

To access the MSDTC security configuration options follow these steps:

On Windows Server 2003 SP1 and Windows XP SP2:

  1. Click Start, click Run, and type dcomcnfg to launch the Component Services Management console.
  2. Click to expand Component Services and click to expand Computers.
  3. Right-click My Computer, and click Properties.
  4. Click on the MSDTC tab of the My Computer Properties dialog and click on the Security Configuration button to display the Security Configuration dialog box.

On Windows Server 2008, Windows 7 and Windows 10:

  1. Click Start, click Run, and type dcomcnfg to launch the Component Services Management console.
  2. Click to expand Component Services and click to expand Computers.
  3. Click to expand My Computer, click to expand Distributed Transaction Coordinator, right-click Local DTC, and click Properties.
  4. Click the Security tab of the Local DTC Properties dialog.
Local DTC Properties

Network DTC Access check box – Select this check box if you want to allow any network traffic for the Distributed Transaction Coordinator (DTC).

If this check box is not selected, the DTC will not flow any transactions to the network, and it will not accept any incoming traffic. Remote administration of this DTC will also be disabled.

Allow Inbound: Select this check box to allow a remote computer to flow transactions to the local computer. Typically, this option is needed on the computer that is hosting the DTC for a resource manager such as Microsoft SQL Server.

Allow Outbound: Select this check box to allow the local computer to flow transactions to a remote computer. Typically, this option is needed on the client computer, where the transaction is initiated.

Click OK.

Finally, restart the application which works with distributive transactions.


6x faster WordPress Hosting6x faster WordPress Hosting

Can’t build solution in Visual Studio

Problem:

When I wanted to build the solution in Visual Studio, I got message: Rebuild All failed.

Description:

I have 2 projects in the solution. MainApplication and ClassLibrary. The MainApplication has reference to ClassLibrary.

Project hierarchy in Solution Explorer in Visual Studio
Project hierarchy in Solution Explorer in Visual Studio

The Error List shows no error. There is also no error in code.

No error in Error List
No error in Error List

Then I switched to Output window and here I got more informations.

Output Window in Visual Studio
Output Window in Visual Studio

From the Output you see, that the ClassLibrary was successfully built. Problem was during the building of the MainApplication.

warning MSB3274: The primary reference "D:\Temp\13\MySolution\ClassLibrary\bin\Debug\ClassLibrary.dll" 
could not be resolved because it was built against the ".NETFramework,Version=v4.7.2" framework. 
This is a higher version than the currently targeted framework ".NETFramework,Version=v4.6.1".
2>D:\Temp\13\MySolution\MainApplication\Form1.cs(25,23,25,35): error CS0103: 
The name 'ClassLibrary' does not exist in the current context

From this information we know that the MainApplication has targeting Framework v4.6.1 but the ClassLibrary has higher version v4.7.2.

Solution:

I changed the Target Framework from v4.6.1 to v4.7.2 in MainApplication Project Properties.

Target Framework in Project Properties
Target Framework in Project Properties

After this change the Visual Studio successfully rebuilt the projects.

Summary:

The given project’s Target Framework version should be higher or equal than the target Framework version of referenced projects.


6x faster WordPress Hosting6x faster WordPress Hosting

Can’t read XML document if contains ampersand symbol

Problem:

System.Xml.XmlException: An error occurred while parsing EntityName.


Description:

I had the following C# code snippet and got error on the line 6 at doc.Load(…):

System.Xml.XmlException: An error occurred while parsing EntityName. Line 4, position 18.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
private void LoadXML()
{
     try
     {
          XmlDocument doc = new XmlDocument();
          doc.Load("data.xml");

          //...
     }
     catch (Exception ex)
     {
          string msg = ex.ToString();
     }
}

I checked the XML document and on the line 4 and position 18 I had & (ampersand) sign.

<?xml version="1.0" standalone="yes"?>
<Items>
  <Item>
    <Text>Black & White</Text>
  </Item>
</Items>

So the question is: how to parse XML file with & (ampersand) sign? πŸ™‚

Solution:

Then I replaced the ampersand sign in the XML document with the appropriate escape sequences: &amp; and the problem was solved.

Here is the modified XML document:

<?xml version="1.0" standalone="yes"?>
<Items>
  <Item>
    <Text>Black &amp; White</Text>
  </Item>
</Items>

6x faster WordPress Hosting6x faster WordPress Hosting