I hope you all know that Angular 5 has been released. In this article, we will see how to start working with Angular 5 and ASP.NET Core using Angular5TemplateCore.
It’s very simple and easy to develop an Angular 5 application for ASP.NET Core using the Angular5TemplateCore. Let's see this in detail.
Prerequisites
Make sure you have installed all the prerequisites on your computer. If not, then download and install all, one by one.
- First, download and install Visual Studio 2017 from this link.
- Download and install .NET Core 2.0
- Download and install Node.js v9.0 or above. I have installed v9.1.0 (Download link).
Note
Before starting the project, make sure that you have installed Visual Studio 2.0 and .NET Core version 2.0 or above on your computer. If not, kindly download and install from the above links.
Prerequisites Installation part
Install Nod.js
Install the Node.js version 9.0 or above on your computer.
Installing Angular5TemplateCore
Let’s see how to install the Angular5TemplateCore to your Visual Studio .NET Core template.
Open Visual Studio 2017 and go to File -> New project. Select Online from the left menu, then select Visual C#. From the list, search for Angular5TemplateCore and click OK.
Close your Visual Studio and wait until Angular5TemplateCore installs. After the installation is completed, it's time for building your first Angular 5 application using ASP.NET Core Template. We will see this in detail in the code part.
Code Part
Now, it’s time to create our first Angular 5 and ASP.NET Core application.
Step 1 Create Angular5TemplateCore
After installing all the prerequisites listed above and Angular5TemplateCore, click Start >> Programs >> Visual Studio 2017 >> Visual Studio 2017, on your desktop.
Click New >> Project. Select Visual C# >> Select Angular5Core2. Enter your project name and click OK.
Once our project is created, we can see it in the Solution Explorer with Angular5 sample components, HTML, and app in the ClientApp folder, along with ASP.NET Core Controllers and View folder.
Here, these files and folders are very similar to our ASP.NET Core Template Pack for Angular 2.
Package.json File
If we open the package.json file, we can see all the dependencies needed for Angular 5 and the Angular CLI has already been added by default.
Adding Webpack in Package.json
In order to run our Angular 5 application, we need to install the webpack in our application. If the webpack is by default not added to our package.json file, then we need to add it manually. Webpack is an open-source JavaScript module bundler. It takes modules with dependencies and generates static assets representing those modules. To know more about Webpack, click here.
Open your package.json file and add the below line under scripts.
- "postinstall": "webpack --config webpack.config.vendor.js"
Build and run your project
Now, our Angular 5 and ASP.NET Core application are ready. We can run and see the output in the browser. First, build the application. After the build is created successfully, run the application.
When we run the Angular 5 ASP.NET Core application, we can see the default home page with left side menu and Counter and Fetch data. Yes, in Angular5Core2Template, when we create a new project, by default, 3 components and an HTML file are added to Angular 5 demo - Home, Counter, and Fetch data.
In the component file, we can change the Angular 5 class to produce the output as per our need or we can add our own folder to display the output, with components and HTML files.
Changing Home Component and HTML file
Now, let’s try to change the home component class and HTML file to display the output with our name on the homepage.
For this, first, we edit the home.components.ts file. Here, in Home Component class, I have created a public variable to display my name as “myname”.
- import { Component } from '@angular/core';
-
- @Component({
- selector: 'home',
- templateUrl: './home.component.html'
- })
- export class HomeComponent {
- public myname = "Shanu";
- }
In home.html file, I have changed the HTML design to bind and display the Angular 5 component variable.
- <h1>
- Welcome to <strong>{{ myname }}</strong> Angular5 and ASP.NET Core world
- </h1>
Refreshing the homepage, we can see that my name will be displayed on the HTML page from Angular 5 Component along with a welcome message.
Same like this, we can also find the default Counter and Fetch data from API sample component and the HTML file has been added by default. If we want, we can change that to our requirement or we can create our own component and HTML files.
Left Menu
In the application, we can see the menu on the left side. The menu has been displayed using the navmenu.component.ts and navmenu.components.html. If you want to remove or add a menu, we can change the HTML and Angular 5 TypeScript file.
If you have already worked with ASP.NET Core Template pack for Angular 2, then this will be more simple and easy for you to work with Angular 5 because it follows the similar steps. Angular 5 is mostly similar to Angular 4 with same features but with some advanced level. In our next article, we will see in a deeper manner and in detail with some real-time example to working with Angular 5 and ASP.NET Core.
Ashutosh KushawahaPosted Apr 22, 2018, 11:25 PM
Can i use node js command prompt to create component in above project. i have tried to use cli but i am getting error. please help me.
Ion VasilePosted Apr 15, 2018, 3:25 AM
The attached sampkle works only if Angular packages version is 4.2.5.(this is forced by the npm shrink json file). However this can't be run if the Angular is upgraded to 5.2.9. I always get this:"'One or more errors occurred. (Version of @angular/compiler-cli needs to be 2.3.1 or greater. Current version is "5.2.9".Error: Version of @angular/compiler-cli needs to be 2.3.1 or greater. Current version is "5.2.9"." This message is a non sense
Cecilia LimayPosted Mar 9, 2018, 2:25 PM
Hi Shanu, l have changed the version of the bootstrap to the 4 in the package json, them it install in node modules but in the proyect l have the same old version. What can l do?
surendra manduvaPosted Mar 9, 2018, 6:18 AM
Hi Syed, Thanks for the article. We are trying to move from .net framework (MVC with WEb API) to .net core, can u tell me ,are there any major features missed in .net core from .net framework??
Vishesh MahalePosted Mar 3, 2018, 3:51 AM
Hi, I am trying to publish the app from visual studio but i am getting the error Severity Code Description Project Path File Line Suppression State Error The c7ommand "node node_modules/webpack/bin/webpack.js --env.prod" exited with code 1. firstazureapp C:\Users\acer\source\repos\firstazureapp\firstazureapp C:\Users\acer\source\repos\firstazureapp\firstazureapp\firstazureapp.csproj 497
Vishesh MahalePosted Mar 2, 2018, 11:22 AM
Hi, I am trying to publish the app from visual studio but i am getting the error Severity Code Description Project Path File Line Suppression State Error The c7ommand "node node_modules/webpack/bin/webpack.js --env.prod" exited with code 1. firstazureapp C:\Users\acer\source\repos\firstazureapp\firstazureapp C:\Users\acer\source\repos\firstazureapp\firstazureapp\firstazureapp.csproj 497
Javi LDBPosted Feb 28, 2018, 1:30 PM
Hi, great article. Forgive my noob question, but I don't fully understand the role of Node.js in this scenario. As I understand, Node.js and ASP.NET compete in the backend side, while Angular is for the front end. So why install Node.js? Thank you!
kamlesh delatPosted Feb 7, 2018, 11:56 PM
How to pubish in azure app service
MuraliPosted Dec 11, 2017, 2:40 AM
Hi, I am not able to get Angular5TemplateCore from online as referred by you in my vs2017. Please let us know how to get that?
Laxmidhar SahooPosted Dec 2, 2017, 6:22 AM
Thanks a lot for the post
Angel CaballeroPosted Nov 28, 2017, 1:29 PM
Hi guys, does anyone knows how to create a login screen before the main screen of the default project of an angular template created by VS2017?
Adnan MevliwalaPosted Nov 22, 2017, 3:59 AM
Very nice and detailed article.
Rebai HamidaPosted Nov 20, 2017, 4:53 AM
Great article! Thank you for sharing!
Humayun Kabir MamunPosted Nov 15, 2017, 5:52 AM
Thanks Mr. Shanu for this getting started article.
Elavarasan RPosted Nov 14, 2017, 7:32 PM
great sir, very useful for beginners & easy to understandable..
Khaja MoizuddinPosted Nov 14, 2017, 2:24 PM
Great Sir Your Article will be Unique as Always, with latest technologies.
Satyaprakash SamantarayPosted Nov 14, 2017, 2:50 AM
Thanks Mr. Syed for sharing this one.............................
Revathi ParvathiPosted Nov 14, 2017, 12:55 AM
Can you give me sample example how to store data in to database using Angular 5
Revathi ParvathiPosted Nov 14, 2017, 12:55 AM
Hi Syed Sir, Very nice article.Can you help me how to connect front and backend?