The following pre-requisites are needed to getting started with Angular 2 application in ASP.Net MVC 6.
.NET Core: You need to install .NET core, which can be downloaded from the following link:
Create an empty ASP.NET Core project
Open Visual studio 2015 and select ASP.NET core web Application and name it as “ESAngular2Demo” and select “Empty” project template.
Creating simple web page
Let’s create HTML file named index.html under “wwwroot” folder.
Right click on “wwwroot” folder and select “Add New Item” option then create index.html file. This HTML page will act as default page. Copy below code into html page.
For ASP.NET Core to serve static files, we need to add StaticFiles middleware in Configure method of Startup.cs page.
project.json is redesigned to make it better, we have Static Files middleware to serve static assets like HTML, JS files etc.
Add below package to the project.json file for using static files.
Now right click on project “ESAngular2Demo” and choose Restore Packages to restore the required packages. Then Build and run project it will render the html page.
Start with Angular 2 in ASP.NET Core
Adding NPM Configuration file for Angular 2 packages
Right Click on “ESAngular2Demo “, add new file “NPM Configuration File “, by default package.json is added to ASP.NET Core project. This acts Node Package Manager (NPM) file, which is must for adding packages for Angular 2 application.
Add the below Typescript configuration (tsconfig.json) and typings.json files by right click the project “ESAngular2Demo”and choose Typescript JSON configuration file.
Copy and paste below configuration in package.json file.
After saving this, Visual Studio starts restoring the packages. It would download all the packages mentioned in the above package.json.
If packages are not restored properly, right click the project and open in Windows Explorer and install node packages using command prompt. Run the below command in project location.
After installation, the restored packages look like below screenshot.
Moving files using GULP
After NPM install of Angular 2 in ASP.NET Core project, notice “node_modules” folder has all packages needed.
“wwwroot” is web root folder, so it’s essential to move all needed files to this folder. In index.html we can refer them from this location.
Right Click on “ESAngular2Demo” project, add new “Gulp Configuration File” naming it gulpfile.js and copy below code into it.
Adding Typescript Configuration file
Create “scripts” folder under root of project “ESAngular2Demo” and add Typescript configuration (tsconfig.json) and typings.json files into it. Copy below code snippet and paste it into the corresponding files.
Adding EJ Components
Create app.component.ts and main.ts files under scripts folder. Copy below code into typescript files to render ejDialog components.
After finished above two steps run default gulp task once, which is in “Task Runner Explorer”, otherwise the below mentioned folders will not be created.
Add systemjs.config.js file under “wwwroot” folder to load Angular 2 script files.
Adding HTML file
In index.html file copy below code to render “Dialog” component. Create “deps” folder under “wwwroot” and add all EJ dependencies scripts and css files under deps folder.
Finally, you will get following output:
|Article ID:||Published Date:||Last Revised Date:||Platform:||Control:|